Eigenständige Bausteine für HTML und PHP. Jedes Beispiel hat seinen vollständigen Quellcode direkt darunter. Farben, Hell/Dunkel, Dichte und Schrift folgen deiner Docs-Ansicht.
Interaktionen bleiben lokale Demos. Formulare senden keine Nachrichten; es gibt keine Zahlung oder Server-Synchronisation. Beim mehrfachen Einfügen IDs eindeutig vergeben und den jeweiligen Initialisierer einmal nach dem Markup aufrufen.
Panels & Zustände
Projekttabs · Horizontal
Drei zugeordnete Panels, Pfeiltasten, Home/End und logisch gespiegelte horizontale Steuerung. Ohne JavaScript bleiben alle Inhalte zugänglich.
Die Blöcke nutzen dieselben semantischen Farbvariablen wie das Framework. Ein Wechsel des Schemas ändert die Gestaltung der gesamten Ansicht.
Bleibt kompakte Darstellung lesbar?
Dichte und Schriftgröße sind voneinander unabhängig. Auch in XS können Texte normal groß bleiben. Lange Antworten bleiben vollständig sichtbar.
Funktioniert der Inhalt ohne JavaScript?
Native Details lassen sich auch ohne das optionale Modul öffnen und schließen. Das Modul ergänzt die exklusive Öffnung dieser Variante.
HTML · inklusive Stylesheets und Modul-Einbindung
<!doctype html>
<html lang="de" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Antworten · Exklusives Accordion · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-patterns.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section id="bp-accordion" class="bp-block" data-bp-accordion="single" aria-labelledby="bp-accordion-title">
<p class="bp-eyebrow">Wissen / Grundlagen</p>
<h3 class="bp-title" id="bp-accordion-title">Gute Fragen. Klare Antworten.</h3>
<details class="bp-details">
<summary>Wie werden Farben übernommen?</summary>
<p>Die Blöcke nutzen dieselben semantischen Farbvariablen wie das Framework. Ein Wechsel des Schemas ändert die Gestaltung der gesamten Ansicht.</p>
</details>
<details class="bp-details">
<summary>Bleibt kompakte Darstellung lesbar?</summary>
<p>Dichte und Schriftgröße sind voneinander unabhängig. Auch in XS können Texte normal groß bleiben. Lange Antworten bleiben vollständig sichtbar.</p>
</details>
<details class="bp-details">
<summary>Funktioniert der Inhalt ohne JavaScript?</summary>
<p>Native Details lassen sich auch ohne das optionale Modul öffnen und schließen. Das Modul ergänzt die exklusive Öffnung dieser Variante.</p>
</details>
</section>
<script type="module">
import {initPatternBlocks} from 'https://ui.rittek.de/assets/modules/blocks-patterns.js';
const cleanup = initPatternBlocks(document.getElementById('bp-accordion'));
// Beim Entfernen der Ansicht: cleanup();
</script>
</body>
</html>
Panels & Zustände
Verzeichnis · Suche und Pagination
Lokale Suche und gekürzte Seitennavigation mit Anfang/Ende und aktuellem Zustand. Ein Suchwechsel beginnt auf Seite eins.