1. Home
  2. Blöcke verwenden
  3. Brics
  4. Inhalt mit Registerkarten Bric

Inhalt mit Registerkarten Bric

Der Inhalt mit Registerkarten Bric Bietet einen Inhaltsbereich, dessen Inhalt über Navigationsregisterkarten gesteuert wird. Im Gegensatz zu den meisten anderen Brics innerhalb gefunden Blocs, der Inhalt mit Registerkarten Bric besteht aus zwei getrennten Teilen, einer Liste Bric und ein Div Bric. Beide Elemente, aus denen der Inhalt mit Registerkarten besteht Bric enthalten wichtige benutzerdefinierte Datenattribute, mit denen sie zusammenarbeiten können.

Hinzufügen weiterer Registerkarten

Um weitere Registerkarten hinzuzufügen, wählen Sie einfach eine der Registerkarten für Listenelemente über den Ebenenbaum aus und duplizieren Sie sie über die Tastenkombination D. Achten Sie darauf, auch den Inhaltsbereich Div zu duplizieren, der zum Anzeigen des Inhalts benötigt wird.

Kommunikation

Das Listenelement aus einem Inhaltsbereich mit Registerkarten zeigt die Registerkartenlinks an, auf die geklickt wird, um den relevanten Registerkarteninhalt anzuzeigen. Für jeden dieser Links ist eine URL-Interaktion festgelegt. Diese URL verweist beispielsweise auf eine ID # nav-36725-content-3 und ein benutzerdefiniertes Attribut mit dem Namen Arienkontrollen Zum Beispiel mit einer passenden ID ohne das # am Anfang nav-36725-inhalt-3. Diese IDs stimmen auch mit dem benutzerdefinierten Datenattribut überein Arie-beschriftet von, das sich auf dem Div-Element mit Registerkarten befindet, das sich auf diesen Tab-Link bezieht.

Tab Container div aria-labelledby benutzerdefiniertes Attribut

Anfängertipp

Wenn Sie Änderungen an der Tab-Link-URL-Interaktion vornehmen oder versuchen, weitere Bereiche mit Registerkarten hinzuzufügen, stellen Sie sicher, dass Sie diese Änderungen auch an den Aria-Steuerelementen und den Aria-Labels durch benutzerdefinierte Datenattribute aktualisieren, damit sie alle übereinstimmen.

Weitere Informationen zur Funktionsweise von Inhaltsbereichen mit Registerkarten finden Sie in der Bootstrap 4-Dokumente.

Aktualisiert am 3. Dezember 2018

War dieser Artikel hilfreich?

Ähnliche Artikel