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

De component van de Accordeon van de Component van de Kern staat voor de verwezenlijking van een inzameling van componenten toe, die als panelen worden samengesteld, en in een accordeon op een pagina worden geschikt, gelijkend op de Component van Lusjes, maar staat voor het uitbreiden en het doen ineenstorten van de panelen toe.

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.

Componentversie
AEM 6,4
AEM 6,5
AEM as a Cloud Service
v1
Compatibel systeem met
versie 2.17.4en vroeger
Compatibel
Compatibel

Voor meer informatie over de versies en versies van de Component van de Kern, zie de Versies van de Componenten van de Document Kern.

Uitvoer van voorbeeldcomponent sample-component-output

Om de Component van de Accordeon te ervaren evenals voorbeelden van zijn configuratieopties evenals HTML en output te zien JSON, bezoek de Bibliotheek van de Component.

Technische details technical-details

De recentste technische documentatie over de Component van de Accordeon kan op GitHubworden gevonden.

De verdere details over het ontwikkelen van de Componenten van de Kern kunnen in de de ontwikkelaarsdocumentatie van de Componenten van de Kern worden gevonden.

Diep koppelen aan een deelvenster deep-linking

De accordeon, Carousel,en de steun van Componenten van Lusjesdie rechtstreeks met een paneel binnen de component verbinden.

Dit doet u als volgt:

  1. Bekijk de pagina met de component gebruikend de Mening zoals Gepubliceerde optie in de paginaredacteur.
  2. Inspect de inhoud van de pagina en identificeer de id van het deelvenster.
    • Bijvoorbeeld id="accordion-86196c94d3-item-ca319dbb0b"
  3. 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

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. Gelieve te zien het document Responsieve Ontwerp van de Componenten van de Kernvoor 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

Punten lusje van uitgeeft dialoog van de Component van de Accordeon

Gebruik voeg knoop toe om de componentenselecteur te openen om te kiezen welke component om als paneel toe te voegen. 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 paneel wordt gebruikt, die aan de naam van de component in gebreke blijft die voor het paneel wordt geselecteerd.
  • Schrapping - Tik of klik om het paneel van de accordeoncomponent te schrappen.
  • herschikt - Tik of klik en sleep om de orde van de panelen te herschikken.
TIP
Als viewport van de pagina wordt verminderd zodat uitgeeft dialoog volledig scherm wordt, voegt knoop toe zal worden verborgen. De componenten kunnen nog aan de Component van de Accordeon worden toegevoegd door van componenten te slepen browser en op de Component van de Accordeon in de paginaredacteurte vallen.

Tabblad Eigenschappen properties-tab

het lusje van Eigenschappen van uitgeeft dialoog van de Component van de Accordeon

  • Enige puntenuitbreiding - wanneer geselecteerd, dwingt deze optie één enkel accordeonpunt om tegelijkertijd worden uitgebreid. Als u één item uitbreidt, worden alle andere items samengevouwen.

  • Uitgebreide punten - deze optie bepaalt de punten die door gebrek worden uitgebreid wanneer de pagina wordt geladen.

    • Wanneer Enige puntuitbreiding wordt geselecteerd, moet één paneel worden geselecteerd. Standaard is het eerste deelvenster geselecteerd.
    • Wanneer Enige puntuitbreiding niet wordt geselecteerd, is deze optie multi-select en facultatief.
  • identiteitskaart - Deze optie staat toe om het unieke herkenningsteken van de component in HTML en in de Laag van Gegevens te controleren.

    • 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 inhoudauteur kan de Uitgezochte 1} optie van het Comité op de componententoolbar gebruiken om in een verschillend paneel te veranderen voor het uitgeven evenals de orde van de panelen binnen de accordeon gemakkelijk te herschikken.

Uitgezochte paneelpictogram

Zodra het selecteren van de Uitgezochte optie van het Comité in de componententoolbar, worden de gevormde accordeonpanelen getoond als drop-down.

Uitgezochte paneel popover

  • 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

de dialoogeigenschappen tabel van het Ontwerp

  • Toegestane Elementen van de Kop - Dit multi-uitgezochte drop-down bepaalt de HTML elementen van de kopbal van het accordeonpunt die door een auteur mogen worden geselecteerd.
  • Standaard het Element van de Kop - Deze drop-down bepaalt het HTML element van de kopbal van het standaardAccordeonpunt.

Tabblad Toegestane componenten allowed-components-tab

Het Toegestane lusje van Componenten wordt gebruikt om te bepalen welke componenten als punten aan panelen in de Component van de Accordeon door de inhoudauteur kunnen worden toegevoegd.

De toegelaten Componenten lusjefuncties op de zelfde manier zoals het lusje van de zelfde naam wanneer het bepalen van het beleid en de eigenschappen van een Container van de Lay-out in de Redacteur van het Malplaatje.

Tabblad Stijlen styles-tab

De Component van de Accordeon steunt het AEM Systeem van de Stijl.

Gegevenslaag client-Adobe data-layer

De Component van de Accordeon steunt de Gegevens van de Cliënt van de Adobe Laag.

recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c