Tab

Reiter-Container, der zwischen Bereichen umschaltet. Setze <r-tabs> als Container ein, mit einem oder mehreren <r-tab>-Bereichen darin.

Einsetzen, wenn du einen Reiter-Container brauchst, der zwischen Bereichen umschaltet. Baue <r-tabs> mit <r-tab>-Kindern, von denen jedes ein label für die Kopfzeile und den Inhalt des Bereichs mitbringt.

Schnellstart

Grundlegende Verwendung

<r-tabs>
  <r-tab label="tab1">11111</r-tab>
  <r-tab label="tab2">22222</r-tab>
  <r-tab label="tab3">33333</r-tab>
</r-tabs>

Jedes <r-tab> wird zu einem Bereich; sein label erscheint als Schaltfläche in der Kopfzeile, und der eingeschobene Inhalt ist der Rumpf des Bereichs. Wer eine Kopfzeile wählt, lässt den zugehörigen Bereich hereingleiten.

API-Referenz

Eigenschaften von r-tabs

Der Container. Er hält die Kopfzeile, die Markierung des aktiven Reiters und den Inhaltsbereich.

Der Setter von active nimmt einen Schlüssel als Zeichenkette; null zuzuweisen entfernt das Attribut. Ohne gesetztes active wird beim Einhängen der erste nicht deaktivierte Reiter gewählt.

Eigenschaften von r-tab

Ein einzelner Bereich. Seine Attribute liest das übergeordnete <r-tabs>, um die passende Schaltfläche in der Kopfzeile zu bauen.

Getter und Setter der Eigenschaft key lesen und schreiben das Attribut r-key (der schlichte Name key wird vermieden, weil er ein reserviertes Feld ist). Setze label und r-key, bevor das Element verbunden wird: Änderungen an diesen beiden Attributen werden nach dem Bau der Kopfzeilen nicht erneut verarbeitet.

Stil der Kopfzeile type

flat (Standard) zeigt eine gleitende Unterstreichung als Markierung; line zeichnet Reiter mit Rahmen.

<r-tabs type="flat">
  <r-tab label="tab1">11111</r-tab>
  <r-tab label="tab2">22222</r-tab>
  <r-tab label="tab3">33333</r-tab>
</r-tabs>

<r-tabs type="line">
  <r-tab label="tab1">11111</r-tab>
  <r-tab label="tab2">22222</r-tab>
  <r-tab label="tab3">33333</r-tab>
</r-tabs>

Ausrichtung der Kopfzeile align

Richtet die Kopfzeile aus. Standard ist start.

<r-tabs type="line" align="start"> ... </r-tabs>
<r-tabs type="line" align="center"> ... </r-tabs>
<r-tabs type="line" align="end"> ... </r-tabs>

Aktiver Reiter: active und r-key

• r-key ist ein Attribut von <r-tab> und gibt jedem Bereich innerhalb desselben <r-tabs> eine stabile Identität. Fehlt es, gilt der Index des Bereichs.
• active ist ein Attribut von <r-tabs> und wählt den anfangs aktiven Reiter: Gezeigt wird der Bereich, dessen r-key gleich active ist.

Ohne ausdrückliche Schlüssel passt active auf den nullbasierten Index:

<r-tabs active="1">
  <r-tab label="tab1">11111</r-tab>
  <r-tab label="tab2">22222</r-tab>
  <r-tab label="tab3">33333</r-tab>
</r-tabs>

Mit ausdrücklichen r-key-Werten (Bereiche ohne Schlüssel fallen auf ihren Index zurück):

<r-tabs active="c">
  <r-tab label="tab1" r-key="a">11111</r-tab>
  <r-tab label="tab2" r-key="b">22222</r-tab>
  <r-tab label="tab3" r-key="c">33333</r-tab>
  <r-tab label="tab4">4</r-tab>
</r-tabs>

Jeder r-key innerhalb eines <r-tabs> muss eindeutig sein: Doppelte oder fehlende Schlüssel an einzelnen Bereichen werfen beim Bau der Kopfzeilen einen Fehler.

Deaktivierter Bereich disabled

Ein deaktiviertes <r-tab> lässt sich nicht wählen und wird auch bei der Wahl des voreingestellten aktiven Reiters übersprungen.

<r-tabs active="c">
  <r-tab label="tab1" r-key="a" disabled>11111</r-tab>
  <r-tab label="tab2" r-key="b">22222</r-tab>
  <r-tab label="tab3" r-key="c">33333</r-tab>
  <r-tab label="tab4">4</r-tab>
</r-tabs>

Symbol in der Kopfzeile: icon und iconSize

<r-tab> nimmt ein Attribut icon (den Namen eines r-icon), das vor der Beschriftung gezeichnet wird; iconSize legt seine Größe fest.

<r-tabs>
  <r-tab label="tab1" icon="edit">11111</r-tab>
  <r-tab label="tab2" icon="delete" iconSize="16">22222</r-tab>
  <r-tab label="tab3">33333</r-tab>
</r-tabs>

Welleneffekt effect

Setze effect auf <r-tabs>, damit die Schaltflächen der Kopfzeile beim Klicken eine Welle zeigen. Solange effect aktiv ist, bleibt die gleitende Unterstreichung verborgen.

<r-tabs effect="true">
  <r-tab label="tab1">11111</r-tab>
  <r-tab label="tab2">22222</r-tab>
  <r-tab label="tab3">33333</r-tab>
</r-tabs>

Slots

CSS-Parts

r-tabs stellt bereit:

r-tab stellt bereit:

Ereignisse

change

<r-tabs> sendet ein change-CustomEvent, wenn sich ein beobachtetes Attribut ändert — am häufigsten beim Wechsel des aktiven Reiters. event.detail.active ist der aktuelle aktive Schlüssel (der r-key des gewählten <r-tab>, oder dessen Index, wenn kein r-key gesetzt ist).

const tabs = document.createElement('r-tabs');
tabs.addEventListener('change', (e) => {
  console.log('aktiver Reiter:', e.detail.active);
});
tabbar.append(tabs);

<r-tab> sendet keine eigenen Ereignisse.

Styling

<r-tabs> stellt 10 eigene CSS-Custom-Properties bereit, dazu die semantischen Tokens, die es aus dem Theme liest. Setze eines überall dort, wo es vererbt wird: :root, ein umgebendes Element oder das Element selbst:

r-tabs {
  --ran-tab-content-background: var(--ran-color-bg-subtle);
}

Parts: content · content-wrap · header · indicator · nav · tabs

Die vollständige Liste steht bei den Style-Tokens; welches Token das richtige ist, klärt das Designsystem.

Bewährte Vorgehensweisen

• Stabile Identität: Gib jedem <r-tab> einen eindeutigen r-key und steuere die Auswahl über active an <r-tabs>, statt dich auf Positionsindizes zu verlassen.
• Wahl des Stils: Nimm type="line" für eine gerahmte Reiterleiste im Dokumentstil und type="flat" (Standard) für die schlichte gleitende Unterstreichung.
• Ausrichtung: Mit align="center" oder align="end" verschiebst du die Kopfzeile in breiten Containern.
• Deaktivierte Bereiche: Markiere nicht verfügbare Bereiche mit disabled; sie werden sowohl bei Klicks als auch bei der Vorauswahl übersprungen.
• Tastaturbedienung: Die Kopfzeile ist eine WAI-ARIA-Tablist: Pfeiltasten wechseln zwischen den Reitern (auch Pos1/Ende), und nur der aktive Reiter liegt in der Tab-Reihenfolge.