Component Tabs tabs-component

Met de component Core Component Tabs kunt u de inhoud op meerdere tabbladen ordenen.

Gebruik usage

Met de component Tabs kan de auteur van de inhoud de pagina-inhoud op meerdere tabbladen ordenen.

Het geeft dialoog uitstaat de inhoudauteur toe om veelvoudige lusjes te bepalen evenals het actieve lusje te plaatsen. Gebruikend de ontwerpdialoog, kan de malplaatjeauteur bepalen welke componenten aan lusjes kunnen worden toegevoegd en de stijlen aanpassen.

TIP
Geneste tabcomponenten (tabs binnen tabs) worden ondersteund.
De eenvoudige (niet-genestelde) lusjecomponenten kunnen worden gevestigd/worden geselecteerd gebruikend de inhoudsboom, nochtans kunnen de genestelde lusjes niet worden gevestigd.

Versie en compatibiliteit version-and-compatibility

De huidige versie van de Tabs Component is v1, die in oktober 2018 is geïntroduceerd met release 2.2.0 van de Core Components (Basiscomponenten). Deze versie wordt in dit document 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 Lusjes 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 Lusjes 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 Lusjes, Carrousel,en de steun van Componenten van de Accordeondie 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.

Tab 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 van het Lusje kunnen specifieke overweging binnen het kader van het het uitvoeren project vereisen om ontvankelijkheid in alle omstandigheden te handhaven. Gelieve te zien het document Responsieve Ontwerp van de Componenten van de Kernvoor meer informatie.

Dialoogvenster Bewerken edit-dialog

In het dialoogvenster Bewerken kan de auteur van de inhoud tabbladen maken, hernoemen en opnieuw rangschikken, en het actieve tabblad definiëren.

Tabblad Items items-tab

de Edit de dialoogpunten van de Component van Tabs tabel

Gebruik voeg knoop toe om de componentenselecteur te openen om te kiezen welke component om als tabel toe te voegen. Nadat een item is toegevoegd, wordt het toegevoegd aan de lijst met de volgende kolommen:

  • Pictogram - het pictogram van het componententype van het lusje 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 lusje wordt gebruikt, die aan de naam van de component in gebreke blijft die voor het lusje wordt geselecteerd.
  • Schrapping - Tik of klik om het lusje van de lusjecomponent te schrappen.
  • herschikt - Tik of klik en sleep om de orde van de lusjes 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 Lusjes worden toegevoegd door te slepen van componenten browser en het vallen op de Component van Lusjes in de paginaredacteur.

Tabblad Eigenschappen properties-tab

geeft de componenten van de Component van Tabs uit dialoogeigenschappen tabel

  • Actief Punt - de inhoudauteur kan bepalen welk lusje actief is wanneer de pagina wordt geladen.

    • Met de Standaard optie, zal het eerste lusje worden geselecteerd.
  • 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.

Tabblad Toegankelijkheid accessibility-tab

de bewerkingsdialoog van de Component van Lusjes van Lusjes lusje

Op het lusje van de Toegankelijkheid, kunnen de waarden voor de toegankelijkheidslabels van ARIAvoor de component worden geplaatst.

  • Etiket - Waarde van een ARIA etiketattribuut voor de component

Deelvenster selecteren select-panel

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 lusjes gemakkelijk te herschikken.

Uitgezochte paneelpictogram

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

  • De lijst wordt geordend door de toegewezen rangschikking van de lusjes en in de nummering weerspiegeld.
  • Het componenttype van de tab wordt als eerste weergegeven, gevolgd door de beschrijving van de tab in lichtere lettertypen.

Uitgezochte paneel popover

  • Als u op een item in het vervolgkeuzemenu tikt of erop klikt, wordt de weergave in de editor naar dat tabblad verplaatst.
  • U kunt de tabvolgorde op de juiste plaats wijzigen door de sleepgrepen te gebruiken.
NOTE
De lusjes zijn niet selecteerbaar door de auteur wanneer op ​wijze uitgeeft. De wijze van de Voorproef van het gebruik 🔗 of de Mening zoals Gepubliceerdeoptie om met de lusjes als lezer van de gepubliceerde inhoud in wisselwerking te staan.

Ontwerpdialoogvenster design-dialog

In het ontwerpdialoogvenster kan de sjabloonauteur definiëren welke componenten als items aan de component tabs kunnen worden toegevoegd en welke aangepaste stijlen beschikbaar zijn voor de auteur van de inhoud.

Tabblad Toegestane componenten allowed-components-tab

Het Toegestane lusje van Componenten wordt gebruikt om te bepalen welke componenten als punten aan de component van lusjes 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 Lusjes steunt het AEM Systeem van de Stijl.

Gegevenslaag client-Adobe data-layer

De component van Lusjes steunt de Gegevens van de Cliënt van de Adobe Laag.

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