Accordion

Das Akkordeon Bric bietet eine Möglichkeit, große Mengen an Inhalten aufzuteilen und zwischen dem Ausblenden und Anzeigen umzuschalten. Akkordeons bestehen aus verschiedenen Unterelementen wie dem Karte Trödel und Div Container Bric, wodurch sie leicht individuell angepasst und unabhängig voneinander gestaltet werden können.

Hinzufügen weiterer Abschnitte

Um weitere Akkordeonabschnitte hinzuzufügen, wählen Sie einfach eine der Karten (im Haupt-Akkordeon-Div-Container) über den Ebenenbaum aus und duplizieren Sie sie über die Tastenkombination D.

Struktur

Die Struktur eines Akkordeons ist etwas komplexer als die meisten anderen Brics innerhalb gefunden Blocs. Es besteht aus a Div Container Bric, der seine Typ auf ein setzen Akkordeonbehälter und sein ID Stellen Sie beispielsweise einen eindeutigen Wert ein Akkordeon-17605. Innerhalb dieses Containers gibt es mehrere Karte Brics. Jede Karte Bric hat eine verbindung Bric im Kartenkopfbereich und ein zusätzlicher Div Behälter, der den Kartenkörperabschnitt enthält.

Kommunikation

Die Steuerung der Akkordeon-Bric-Funktionen erfolgt über das verbindung Bric (im Kopfbereich einer Karte zu finden) und die Div Behälter (der den Kartenkörperabschnitt enthält). Beide Artikel haben benutzerdefinierte Datenattribute angewendet auf sie, um ihnen die typische Akkordeonfunktionalität zu geben und ihnen zu ermöglichen, miteinander zu kommunizieren.

Der Link ist das Element, auf das Sie klicken, um den Akkordeonabschnitt anzuzeigen. Dieser Gegenstand hat eine spezielle Einrichtung, die es ihm ermöglicht, als Teil eines Akkordeons zu arbeiten. Es hat seine Interaktion einstellen keine und es hat auch verschiedene benutzerdefinierte Datenattribute, von denen die wichtigsten zwei die sind Datenziel , Arienkontrollen.

Das Datenziel Das Attribut hat beispielsweise einen Wert, der auf eine eindeutige Referenz festgelegt ist # Akkordeon-17605-Artikel-1. Der Arienkontrollen Das Attribut enthält einen nahezu identischen Wert wie das Datenziel Attribut, aber das # am Anfang wurde zum Beispiel entfernt Akkordeon-17605-Artikel-1. Diese eindeutigen Referenzen sollten mit dem übereinstimmen ID des entsprechenden div-Containers, in dem der Kartenkörper verschachtelt ist.

Akkordeon Div Container

In jedem Karten-Bric (im Akkordeon-Hauptcontainer) befindet sich ein zusätzlicher Div Behälter, der seine hat ID Stellen Sie beispielsweise einen eindeutigen Wert ein Akkordeon-17605-Artikel-1. Dieser ID-Wert sollte den benutzerdefinierten Datenattributen entsprechen und mit diesen übereinstimmen. Datenziel , Arienkontrollen zu finden unter dem Link Bric (im Kartenkopfbereich).

Dieser Div-Container Bric enthält auch verschiedene benutzerdefinierte Datenattribute, das wichtigste davon ist Daten-Eltern. Dieser Wert dieses Datenattributs sollte mit dem übereinstimmen ID zum Beispiel des Hauptakkordeonbehälters # Akkordeon-17605. Dieses Datenattribut teilt dem Browser mit, auf welchen Akkordeoncontainer sich dieser Abschnitt bezieht.

Anfängertipp

Wenn Sie Änderungen an den Akkordeon-Link-Datenattributen vornehmen Datenziel or ArienkontrollenAchten Sie darauf, die zu aktualisieren ID für den entsprechenden div-Container (der den Kartenkörperabschnitt enthält) und umgekehrt.

Weitere Informationen zur Funktionsweise von Akkordeons finden Sie in der Bootstrap 4-Dokumente.

Aktualisiert am 3. Dezember 2018
War dieser Artikel hilfreich?

Ähnliche Artikel