Akkordeon-Komponente accordion-component
Die Kernkomponente „Akkordeon“ ermöglicht die Erstellung einer Sammlung von Bedienfeldern, die auf der Seite in einem Akkordeon angeordnet sind.
Nutzung usage
Die Kernkomponente „Akkordeon“ ermöglicht die Erstellung einer Sammlung von Komponenten in Form von Bedienfeldern, die auf einer Seite in einem Akkordeon angeordnet sind, ähnlich der Registerkarten-Komponente, jedoch mit der Möglichkeit, die Bedienfelder ein- und auszublenden.
- Die Eigenschaften des Akkordeons können im Dialogfeld „Konfigurieren“ definiert werden.
- Die Reihenfolge der Bedienfelder im Akkordeon kann im Dialogfeld „Konfigurieren“ und im Popover zur Bedienfeldauswahl definiert werden.
- Standardwerte für die Akkordeon-Komponente können beim Hinzufügen zu einer Seite im Dialogfeld „Design“ konfiguriert werden.
Version und Kompatibilität version-and-compatibility
Die aktuelle Version der Akkordeon-Komponente ist v1, die mit Version 2.5.0 der Kernkomponenten im Juni 2019 eingeführt wurde und in diesem Dokument beschrieben wird.
Die folgende Tabelle enthält alle unterstützten Versionen der Komponente, die AEM-Versionen, mit denen die Versionen der Komponente kompatibel sind, sowie Links zur Dokumentation für frühere Versionen.
Weitere Informationen zu Kernkomponentenversionen und -freigaben finden Sie im Dokument Kernkomponentenversionen.
Musterkomponentenausgabe sample-component-output
Um die Akkordeon-Komponente sowie Beispiele für die Konfigurationsoptionen sowie HTML- und JSON-Ausgaben zu erhalten, besuchen Sie die Komponentenbibliothek.
Technische Details technical-details
Die aktuelle technische Dokumentation zur Akkordeon-Komponente finden Sie auf GitHub.
Weitere Informationen zur Entwicklung von Kernkomponenten finden Sie in der Dokumentation zu Kernkomponenten für Entwickler.
Tiefe Verknüpfung mit einem Bedienfeld deep-linking
Die Akkordeon-, Karussell- und Registerkarten-Komponenten unterstützen direkte Links zu einem Bedienfeld innerhalb der Komponente.
Gehen Sie hierfür wie folgt vor:
- Zeigen Sie die Seite mit der Komponente über die Option Als veröffentlicht anzeigen im Seiteneditor an.
- Überprüfen Sie den Inhalt der Seite und halten Sie die ID des Bedienfeldes fest.
- Beispiel
id="accordion-86196c94d3-item-ca319dbb0b"
- Beispiel
- Die ID wird der Anker, den Sie über einen Hash (
#) an die URL anhängen können.- Beispiel
https://wknd.site/content/wknd/language-masters/en/magazine/western-australia.html#accordion-86196c94d3-item-ca319dbb0b
- Beispiel
Wird zu der URL mit der Bereichs-ID navigiert, scrollt der Browser direkt zur jeweiligen Komponente und zeigt das angegebene Bedienfeld an. Wenn das Bedienfeld so konfiguriert ist, dass es nicht standardmäßig eingeblendet wird, wird es automatisch eingeblendet.
Akkordeon und responsives Design responsive-design
Alle Kernkomponenten sind so konzipiert, dass sie vollständig responsiv sind und auf allen Geräten ein nahtloses Erlebnis bieten.
Einige erweiterte Komponenten wie die Akkordeon-Komponente erfordern möglicherweise besondere Überlegungen im Kontext des Implementierungsprojekts, um unter allen Bedingungen die Reaktionsfähigkeit zu bewahren. Weitere Informationen finden Sie im Dokument Responsives Design der Kernkomponenten.
Dialogfeld „Konfigurieren“ configure-dialog
Mit dem Dialogfeld „Konfigurieren“ können Sie die Akkordeon-Elemente, die Bedienfelder und sein Verhalten und Aussehen für einen Besucher der Seite definieren.
Registerkarte „Elemente“ items-tab
Verwenden Sie die Schaltfläche Hinzufügen, um die Komponentenauswahl zu öffnen und dort auszuwählen, welche Komponente als Bedienfeld hinzugefügt werden soll. Nach dem Hinzufügen wird der Liste ein Eintrag hinzugefügt, der die folgenden Spalten enthält:
- Symbol - Das Symbol des Komponententyps des Bedienfelds zur einfachen Identifizierung in der Liste. Bewegen Sie den Mauszeiger darüber, um den vollständigen Komponentennamen als QuickInfo zu sehen.
- Beschreibung - Die Beschreibung, die als Text des Bedienfelds verwendet wird und standardmäßig den Namen der für das Bedienfeld ausgewählten Komponente enthält.
- Entfernen - Tippen oder klicken Sie, um das Bedienfeld aus der Akkordeon-Komponente zu löschen.
- Neu anordnen - Tippen oder klicken und ziehen Sie, um die Reihenfolge der Bedienfelder neu anzuordnen.
Registerkarte „Eigenschaften“ properties-tab
-
Einzelne Elementerweiterung - Wenn diese Option ausgewählt ist, wird jeweils ein einzelnes Akkordeon-Element eingeblendet. Wenn Sie ein Element einblenden, werden alle anderen ausgeblendet.
-
Erweiterte Elemente - Diese Option definiert die Elemente, die standardmäßig beim Laden der Seite eingeblendet werden.
- Wenn Einzelne Elementerweiterung ausgewählt ist, muss ein Bedienfeld ausgewählt werden. Standardmäßig wird das erste Bedienfeld ausgewählt.
- Wenn Einzelne Elementerweiterung nicht ausgewählt ist, ist diese Option eine Mehrfachauswahl und optional.
-
ID – Diese Option dient zur Kontrolle der eindeutigen Kennung der Komponente in der HTML-Datei und auf der Datenschicht.
- Wenn Sie das Feld leer lassen, wird automatisch eine eindeutige ID generiert, die Sie über die resultierende Seite finden.
- Sofern eine ID angegeben wird, ist vom Autor bzw. der Autorin sicherzustellen, dass diese eindeutig ist.
- Änderungen der ID können sich auf das CSS-, JS- und Datenschicht-Tracking auswirken.
Popover „Bedienfeld auswählen“ select-panel-popover
Der Inhaltsautor kann in der Komponenten-Symbolleiste die Option Bedienfeld auswählen verwenden, um zu einem anderes Bedienfeld zu wechseln, um es zu bearbeiten, und auch um die Reihenfolge der Registerkarten innerhalb des Akkordeons einfach zu ändern.
Nach Auswahl der Option Bedienfeld auswählen in der Komponentensymbolleiste werden die konfigurierten Akkordeon-Bedienfelder als Dropdown-Liste angezeigt.
- Die Liste wird im Sinne der zugewiesenen Anordnung der Bedienfelder geordnet, was sich auch in der Nummerierung zeigt.
- Der Komponententyp des Bedienfelds wird zuerst angezeigt, gefolgt von der Beschreibung des Bedienfelds in hellerer Schriftart.
- Durch Tippen oder Klicken auf einen Eintrag in der Dropdown-Liste wird die Ansicht im Editor auf dieses Bedienfeld umgestellt.
- Die Bedienfelder können direkt mithilfe der Ziehgriffe neu angeordnet werden.
Dialogfeld „Design“ design-dialog
Das Dialogfeld „Design“ ermöglicht es dem Vorlagenautor, die Optionen zu definieren, die für den Inhaltsautor bei Verwendung der Akkordeon-Komponente verfügbar sind, sowie die Standardeinstellungen bei Platzierung der Akkordeon-Komponente.
Registerkarte „Eigenschaften“ properties-tab-design
- Zulässige Überschriftenelemente - Diese Mehrfachauswahl-Dropdown-Liste definiert die HTML-Elemente für die Überschrift des Akkordeon-Elements, die von einem Autor ausgewählt werden können.
- Standardmäßiges Überschriftenelement - Diese Dropdown-Liste definiert das Standard-HTML-Überschriftenelement für das Akkordeon-Element.
Registerkarte „Zugelassene Komponenten“ allowed-components-tab
Über die Registerkarte Zugelassene Komponenten können Sie definieren, welche Komponenten der Akkordeon-Komponente vom Inhaltsautor als Elemente in Bedienfeldern hinzugefügt werden können.
Die Registerkarte „Zugelassene Komponenten“ funktioniert auf die gleiche Weise wie die Registerkarte desselben Namens beim Definieren der Richtlinie und Eigenschaften eines Layout-Containers im Vorlageneditor.
Registerkarte „Arten“ styles-tab
Die Akkordeon-Komponente unterstützt das AEM-Stilsystem.
Adobe Client-Datenschicht data-layer
Die Akkordeon-Komponente unterstützt die Adobe Client-Datenschicht.