Show Menu
THEMEN×

Accordion-Komponente

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

Verwendung

Die Kernkomponente „Accordion“ ermöglicht die Erstellung einer Sammlung von Komponenten in Form von Bedienfeldern, die auf einer Seite in einem Accordion angeordnet sind, ähnlich der Registerkarten-Komponente , jedoch mit der Möglichkeit, die Bedienfelder ein- und auszublenden.

Deep-Link auf ein Bedienfeld

Die Accordion- und Registerkarten-Komponenten unterstützen Direkt-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.

Version und Kompatibilität

Die aktuelle Version der Accordion-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
Kompatibel
Kompatibel
Weitere Informationen zu Kernkomponentenversionen und -freigaben finden Sie in den Kernkomponentenversionen .

Musterkomponentenausgabe

Um die Accordion-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 Accordion-Komponente finden Sie auf GitHub .
Weitere Informationen zur Entwicklung von Kernkomponenten finden Sie in der Dokumentation zu Kernkomponenten für Entwickler .

Dialogfeld „Konfigurieren“

Mit dem Dialogfeld „Konfigurieren“ kann die Accordion-Elemente, die Bedienfelder und sein Verhalten und Aussehen für einen Besucher der Seite definieren.

Registerkarte „Elemente“

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 Accordion-Komponente zu löschen.
  • Neu anordnen - Tippen oder klicken und ziehen Sie, um die Reihenfolge der Bedienfelder neu anzuordnen.
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 Accordion-Komponente weiterhin Komponenten hinzufügen, indem Sie sie per Drag-and-Drop aus dem Komponenten-Browser ziehen und im Seiteneditor auf der Accordion-Komponente ablegen .

Registerkarte „Eigenschaften“

  • Einzelelement-Erweiterung - Wenn diese Option ausgewählt ist, wird jeweils ein einzelnes Accordion-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 Einzelelement-Erweiterung ausgewählt ist, muss ein Bedienfeld ausgewählt werden. Standardmäßig wird das erste Bedienfeld ausgewählt.
    • Wenn Einzelelement-Erweiterung 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 sicherzustellen, dass diese eindeutig ist.
    • Änderungen der ID können sich auf das CSS-, JS- und Datenschicht-Tracking auswirken.

Popover zur Bedienfeldauswahl

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 Accordions einfach zu ändern.
Nach Auswahl der Option Bedienfeld auswählen in der Komponentensymbolleiste werden die konfigurierten Accordion-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“

Das Dialogfeld „Design“ ermöglicht es dem Vorlagenautor, die Optionen zu definieren, die für den Inhaltsautor bei Verwendung der Accordion-Komponente verfügbar sind, sowie die Standardeinstellungen bei Platzierung der Accordion-Komponente.

Registerkarte „Eigenschaften“

  • Zulässige Überschriftenelemente - Diese Mehrfachauswahl-Dropdown-Liste definiert die HTML-Elemente für die Überschrift des Accordion-Elements, die von einem Autor ausgewählt werden können.
  • Standard-Überschriftenelement - Diese Dropdown-Liste definiert das Standard-HTML-Überschriftenelement für das Accordion-Element.

Registerkarte „Zugelassene Komponenten“

Über die Registerkarte Zugelassene Komponenten können Sie definieren, welche Komponenten der Accordion-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 „Stile“

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