CP Registry

Tabs

Registerreiter zum strukturierten Praesentieren von Inhalten ohne Seitenwechsel. Vollständig WAI-ARIA-konform: Roving Tabindex, Pfeiltasten-Navigation und korrekte role="tabpanel"-Zuordnung. Funktioniert ohne JavaScript für statische Inhalte.

Standard

Der häufigste Anwendungsfall: Ein Produkt oder eine Seite mit mehreren Informationsbereichen. Nur der aktive Tab-Inhalt ist sichtbar. Zwischen den Tabs wird mit Pfeiltasten navigiert.

Förderprogramm-Detailseite

Typische Verwendung bei Förder- oder Servicebeschreibungen (z.B. Förderhöhen-Tabelle, ÖPNV-Tickets).

Unser Programm SolarBonus Musterstadt fördert Photovoltaik-Anlagen mit bis zu 2.000 Euro — transparent, kombinierbar mit KfW-Mitteln und mit klarer Antragsfrist. Bonus-Bausteine für Speicher und Eigennutzung erhöhen die Förderhöhe.

  • 1.000 Euro Grundzuschuss für PV-Anlagen ab 5 kWp
  • Bonus 500 Euro für Batteriespeicher
  • Online-Förder-Account mit Statusverfolgung
  • Stoerungsmelder ÖPNV unter 0800 123 456
  • Bescheid innerhalb von 14 Tagen, Auszahlung nach Inbetriebnahme

Wie stelle ich den Antrag?
Online über das Förder-Portal. Wir benötigen nur die Anlagedaten und das Inbetriebnahme-Datum.

Gibt es eine Antragsfrist?
Ja. Anträge müssen vor Beginn der Maßnahme eingehen. Nachtraegliche Förderung ist nicht möglich.

<Tabs tabs={[
  { label: 'Übersicht', id: 'overview' },
  { label: 'Leistungen', id: 'features' },
  { label: 'FAQ', id: 'faq' },
]}>
  <div data-tab-panel="overview">
    <p>Unsere Solar-Förderung...</p>
  </div>
  <div data-tab-panel="features">
    <p>Im Lieferumfang enthalten...</p>
  </div>
  <div data-tab-panel="faq">
    <p>Häufig gestellte Fragen...</p>
  </div>
</Tabs>

Viele Tabs (scrollbar)

Bei mehr als fünf oder sechs Tabs wird die Tab-Leiste horizontal scrollbar. Auf Touch-Geräten kann der Nutzer wischen, auf Desktop erscheint eine Scrollleiste. Die Tabs bleiben vollständig per Tastatur navigierbar.

Quartalsberichte 2024–2025

Beispiel mit sechs Tabs, die bei kleinen Bildschirmen scrollen.

Förderbescheide Q1 2024: 320 Anträge bewilligt. Solar-Förderung +3 % gegenüber Vorjahr. Neue ÖPNV-Abos: 1.240.

Förderbescheide Q2 2024: 280 Anträge bewilligt. Photovoltaik-Anträge +18 %.

Förderbescheide Q3 2024: 240 Anträge bewilligt. Schwerpunkt Beratung Heizungstausch. Bürgerzufriedenheit: 4,6/5.

Förderbescheide Q4 2024: 410 Anträge bewilligt. Jahreshoehepunkt durch Heizperiode. 2.100 neue Förder-Anträge.

Förderbescheide Q1 2025: 360 Anträge bewilligt. Erstmals über 50 % Anteil Wärmepumpen-Förderung.

Förderbescheide Q2 2025: 320 Anträge bewilligt. Einweihung neues Solarfeld Nord. 500 neue Wärmepumpen-Förderungen.

<Tabs tabs={[
  { label: 'Q1 2024', id: 'q1-2024' },
  { label: 'Q2 2024', id: 'q2-2024' },
  { label: 'Q3 2024', id: 'q3-2024' },
  { label: 'Q4 2024', id: 'q4-2024' },
  { label: 'Q1 2025', id: 'q1-2025' },
  { label: 'Q2 2025', id: 'q2-2025' },
]}>
  <div data-tab-panel="q1-2024"><p>Ergebnisse Q1 2024...</p></div>
  ...
</Tabs>

Redakteur-Hinweise

Empfehlungen für gut nutzbare Tab-Bereiche.

Element Empfehlung
Tab-Titel1–2 Wörter. Kurz und eindeutig. „Privat“, „Gewerbe“, „Förderhöhe“ statt „Informationen für Privatpersonen“.
Anzahl2–5 Tabs ideal. Ab 6 Tabs wird horizontal gescrollt — möglich, aber nicht optimal.
InhaltAehnliche Inhaltslaenge pro Tab. Große Laengenunterschiede lassen Tabs springen. Max. 1 Bildschirmseite.
Wann Tabs nutzenFür gleichwertige Alternativen (Privat/Gewerbe, Monat/Jahr). Nicht für sequentielle Schritte — dafür Accordion.

Installation

cp-components add tabs