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.
De dialoogvenster bewerken Hiermee kan de auteur van de inhoud meerdere tabbladen definiëren en het actieve tabblad instellen. Met de ontwerpdialoogvensterkan de sjabloonauteur definiëren welke componenten aan tabbladen kunnen worden toegevoegd en de stijlen aanpassen.
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.
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 component Tabs 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 Tabs-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 tabs, Carousel en Accordeoncomponenten 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.
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. Zie het document Responsief ontwerp van de kerncomponenten voor 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
Gebruik de Toevoegen om de componentkiezer te openen en te kiezen welke component u als tab wilt toevoegen. Nadat een item is toegevoegd, wordt het toegevoegd aan de lijst met de volgende kolommen:
- Pictogram - Het pictogram van het componenttype van de tab voor eenvoudige 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, stellend aan de naam van de component die voor het lusje wordt geselecteerd.
- Verwijderen - Tik of klik om de tab uit de tabcomponent te verwijderen.
- Opnieuw rangschikken - Tik of klik en sleep om de tabvolgorde te wijzigen.
Tabblad Eigenschappen properties-tab
-
Actief item - De auteur van de inhoud kan bepalen welk tabblad actief is wanneer de pagina wordt geladen.
- Met de Standaard wordt de eerste tab geselecteerd.
-
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.
Tabblad Toegankelijkheid accessibility-tab
Op de Toegankelijkheid tab, waarden kunnen worden ingesteld voor Toegankelijkheid ARIA labels voor de component.
- Label - Waarde van een ARIA-labelkenmerk voor de component
Deelvenster selecteren select-panel
De auteur van de inhoud kan de Deelvenster selecteren op de werkbalk van de component om te schakelen naar een ander deelvenster voor bewerking en om de tabvolgorde gemakkelijk te wijzigen.
Wanneer u de Deelvenster selecteren in de componentwerkbalk worden de geconfigureerde tabbladen weergegeven als een vervolgkeuzelijst.
- 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.
- 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.
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
De Toegestane componenten wordt gebruikt om te definiëren welke componenten door de auteur van de inhoud als items aan de component tabs 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 Tabs ondersteunt de AEM Stijlsysteem.
Gegevenslaag client-Adobe data-layer
De component Tabs ondersteunt de Gegevenslaag client Adobe.