Akkordeon-Komponente

Die Kernkomponente „Akkordeon“ ermöglicht die Erstellung einer Sammlung von Bedienfeldern, die auf der Seite in einem Akkordeon angeordnet sind.

Nutzung

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.

Version und Kompatibilität

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.

Komponentenversion AEM 6.4 AEM 6.5 AEM as a Cloud Service
v1 Kompatibel mit
Version 2.17.4 und vorherigen		 Kompatibel Kompatibel

Weitere Informationen zu Kernkomponentenversionen und -freigaben finden Sie im Dokument Kernkomponentenversionen.

Musterkomponentenausgabe

Um die Akkordeon-Komponente sowie Beispiele für die Konfigurationsoptionen sowie HTML- und JSON-Ausgaben zu erhalten, besuchen Sie die Komponentenbibliothek.

Technische 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

Die Akkordeon-, Karussell- und Registerkarten-Komponenten unterstützen direkte Links zu einem Bedienfeld innerhalb der Komponente.

Gehen Sie hierfür wie folgt vor:

  1. Zeigen Sie die Seite mit der Komponente über die Option Als veröffentlicht anzeigen im Seiteneditor an.
  2. Überprüfen Sie den Inhalt der Seite und halten Sie die ID des Bedienfeldes fest.
    • Beispiel id="accordion-86196c94d3-item-ca319dbb0b"
  3. 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

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.

Dialogfeld „Konfigurieren“

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“

Registerkarte „Elemente“ im Dialogfeld „Bearbeiten“ der Akkordeon-Komponente

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.
TIPP

Wenn der Viewport der Seite so reduziert wird, dass das Bearbeitungsdialogfeld im Vollbildmodus angezeigt wird, ist die Schaltfläche Hinzufügen ausgeblendet. Sie können der Akkordeon-Komponente weiterhin Komponenten hinzufügen, indem Sie sie per Drag-and-Drop aus dem Komponenten-Browser ziehen und im Seiteneditor auf der Akkordeon-Komponente ablegen.

Registerkarte „Eigenschaften“

Registerkarte „Hintergrund“ im Dialogfeld „Design“ der Akkordeon-Komponente

  • 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“

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.

Symbol „Bedienfeld auswählen“

Nach Auswahl der Option Bedienfeld auswählen in der Komponentensymbolleiste werden die konfigurierten Akkordeon-Bedienfelder als Dropdown-Liste angezeigt.

Popover „Bedienfeld auswählen“

  • 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“

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“

Registerkarte „Eigenschaften“ im Dialogfeld „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“

Ü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 Layoutcontainers im Vorlageneditor.

Registerkarte „Arten“

Die Akkordeon-Komponente unterstützt das AEM-Stilsystem.

Adobe Client-Datenschicht

Die Akkordeon-Komponente unterstützt die Adobe Client-Datenschicht.

Auf dieser Seite