Accordeoncomponent accordion-component
Met de component Core Component Accordion kunt u een verzameling deelvensters maken die zijn gerangschikt in een accordeon op een pagina.
Gebruik usage
Met de component Core Component Accordion kunt u een verzameling componenten maken, die als deelvensters zijn samengesteld en die in een accordeon op een pagina zijn gerangschikt, vergelijkbaar met de component Component Tabs, maar kunt u de deelvensters uit- en samenvouwen.
- De eigenschappen van de accordeon kunnen worden gedefinieerd in het dialoogvenster dialoogvenster configureren.
- De volgorde van de deelvensters van de accordeon kan worden gedefinieerd in het dialoogvenster Configureren en in het dialoogvenster popup in deelvenster selecteren.
- De standaardinstellingen voor de component Accordion wanneer deze aan een pagina wordt toegevoegd, kunnen worden gedefinieerd in het dialoogvenster ontwerpdialoogvenster.
Versie en compatibiliteit version-and-compatibility
De huidige versie van de Accordion Component is v1, die in juni 2019 met versie 2.5.0 van de Core Components is geïntroduceerd en in dit document wordt beschreven.
In de volgende tabel staan alle ondersteunde versies van de component, de AEM versies waarmee de versies van de component compatibel zijn en koppelingen naar documentatie voor vorige versies.
Raadpleeg het document voor meer informatie over versies en releases van de Core Component Versies van kerncomponenten.
Uitvoer van voorbeeldcomponent sample-component-output
Als u de accordeoncomponent wilt ervaren en voorbeelden wilt zien van de configuratieopties en van de HTML- en JSON-uitvoer, gaat u naar de Componentbibliotheek.
Technische details technical-details
De meest recente technische documentatie over de Accordion-component kan op GitHub worden gevonden.
Meer informatie over het ontwikkelen van kerncomponenten vindt u in de Documentatie voor ontwikkelaars van kerncomponenten.
Diep koppelen aan een deelvenster deep-linking
de accordeon, Carousel en Componenten tabs ondersteuning voor het rechtstreeks koppelen naar een deelvenster binnen de component.
Dit doet u als volgt:
- De pagina met de component weergeven met de Weergeven als gepubliceerd in de pagina-editor.
- Inspect de inhoud van de pagina en identificeer de id van het deelvenster.
- Bijvoorbeeld
id="accordion-86196c94d3-item-ca319dbb0b"
- Bijvoorbeeld
- De id wordt het anker dat u met een hash aan de URL kunt toevoegen (
#).- Bijvoorbeeld
https://wknd.site/content/wknd/language-masters/en/magazine/western-australia.html#accordion-86196c94d3-item-ca319dbb0b
- Bijvoorbeeld
Wanneer u met de deelvenster-id als anker naar de URL navigeert, schuift de browser rechtstreeks naar de desbetreffende component en geeft deze het opgegeven deelvenster weer. Als het deelvenster is geconfigureerd om niet standaard te worden uitgevouwen, wordt het automatisch uitgevouwen.
Accordeon en responsief ontwerp responsive-design
Alle Core Components zijn ontworpen om volledig te reageren, zodat u over alle apparaten probleemloos kunt genieten.
Sommige geavanceerde componenten, zoals de component Accordion, moeten mogelijk in het kader van het uitvoeringsproject specifieke aandacht krijgen om de reactiesnelheid in alle omstandigheden te behouden. Zie het document Responsief ontwerp van de kerncomponenten voor meer informatie .
Dialoogvenster configureren configure-dialog
In het dialoogvenster Configureren kan de auteur van de inhoud het accordeonitem, de deelvensters definiëren en bepalen hoe het zich gedraagt en wordt weergegeven voor een bezoeker van de pagina.
Tabblad Items items-tab
Gebruik de Toevoegen om de componentkiezer te openen en te kiezen welke component u als deelvenster wilt toevoegen. Nadat een item is toegevoegd, wordt het toegevoegd aan de lijst met de volgende kolommen:
- Pictogram - Het pictogram van het componenttype van het paneel voor gemakkelijke identificatie in de lijst. Plaats de muisaanwijzer boven de volledige componentnaam om deze weer te geven als knopinfo.
- Beschrijving - De beschrijving die als tekst van het deelvenster wordt gebruikt, met standaard de naam van de component die voor het deelvenster is geselecteerd.
- Verwijderen - Tik of klik om het deelvenster uit de accordeoncomponent te verwijderen.
- Opnieuw rangschikken - Tik of klik en sleep om de volgorde van de deelvensters te wijzigen.
Tabblad Eigenschappen properties-tab
-
Uitbreiding van één item - Als deze optie is geselecteerd, wordt één accordeonitem tegelijkertijd uitgebreid. Als u één item uitbreidt, worden alle andere items samengevouwen.
-
Uitgebreide items - Met deze optie worden de items gedefinieerd die standaard worden uitgevouwen wanneer de pagina wordt geladen.
- Wanneer Uitbreiding van één item is geselecteerd, moet er één deelvenster zijn geselecteerd. Standaard is het eerste deelvenster geselecteerd.
- Wanneer Uitbreiding van één item is niet geselecteerd, is deze optie een meerkeuzeoptie en is optioneel.
-
ID - Met deze optie kunt u de unieke id van de component in de HTML en in de Gegevenslaag.
- Als deze leeg blijft, wordt automatisch een unieke id voor u gegenereerd. U kunt deze vinden door de resulterende pagina te inspecteren.
- Als een id is opgegeven, is het de verantwoordelijkheid van de auteur om ervoor te zorgen dat deze uniek is.
- Het wijzigen van de id kan gevolgen hebben voor het bijhouden van CSS-, JS- en gegevenslagen.
Pop-upmenu van deelvenster selecteren select-panel-popover
De auteur van de inhoud kan de Deelvenster selecteren op de werkbalk van de component om de volgorde van de deelvensters in de accordeon te wijzigen in een ander deelvenster om te bewerken.
Wanneer u de Deelvenster selecteren in de componentwerkbalk worden de geconfigureerde accordeondeelvensters weergegeven als een vervolgkeuzelijst.
- De lijst wordt geordend door de toegewezen rangschikking van de deelvensters en wordt weergegeven in de nummering.
- Het componenttype van het deelvenster wordt eerst weergegeven, gevolgd door de beschrijving van het deelvenster in lichtere lettertypen.
- Als u op een item in het vervolgkeuzemenu tikt of erop klikt, wordt de weergave in de editor naar dat deelvenster verplaatst.
- U kunt de deelvensters op hun plaats verplaatsen met behulp van de sleepgrepen.
Ontwerpdialoogvenster design-dialog
In het ontwerpdialoogvenster kan de sjabloonauteur de opties definiëren die beschikbaar zijn voor de inhoudauteur die de accordeoncomponent gebruikt en de standaardinstellingen die zijn ingesteld bij het plaatsen van de accordeoncomponent.
Tabblad Eigenschappen properties-tab-design
- Toegestane kopelementen - Deze meerkeuzekeuzelijst definieert de HTML-elementen van de accordeonitemkop die door een auteur mogen worden geselecteerd.
- Standaardkopelement - Deze vervolgkeuzelijst definieert het standaardelement HTML van de kop van het accordeonitem.
Tabblad Toegestane componenten allowed-components-tab
De Toegestane componenten wordt gebruikt om te definiëren welke componenten door de auteur van de inhoud als items aan deelvensters in de component Accordion kunnen worden toegevoegd.
Het tabblad Toegestane componenten werkt op dezelfde manier als het tabblad met dezelfde naam wanneer het definiëren van het beleid en de eigenschappen van een container voor layout in de Sjablooneditor.
Tabblad Stijlen styles-tab
De component Accordion ondersteunt de AEM Stijlsysteem.
Gegevenslaag client-Adobe data-layer
De component Accordion ondersteunt de Gegevenslaag client Adobe.