Tabbar-komponent tabs-component

Med komponenten Core Component Tabs kan du ordna innehåll på flera flikar.

Användning usage

Med flikkomponenten kan innehållsförfattaren ordna sidinnehåll på flera flikar.

I redigeringsdialogrutan kan innehållsförfattaren definiera flera flikar samt ställa in den aktiva fliken. Med hjälp av designdialogrutan kan mallskaparen definiera vilka komponenter som kan läggas till på flikar och anpassa formaten.

TIP
Kapslade flikkomponenter (tabbar på flikar) stöds.
Enkla (ej kapslade) flikkomponenter kan hittas/väljas med innehållsträdet, men det går inte att hitta kapslade flikar.

Version och kompatibilitet version-and-compatibility

Den aktuella versionen av komponenten Tabs är v1, som introducerades i version 2.2.0 av Core Components i oktober 2018, och som beskrivs i det här dokumentet.

Följande tabell visar alla versioner av komponenten som stöds, de AEM versionerna som komponenterna är kompatibla med och länkar till dokumentation för tidigare versioner.

Komponentversion
AEM 6.4
AEM 6.5
AEM as a Cloud Service
v1
Kompatibel med
version 2.17.4 och tidigare
Kompatibel
Kompatibel

Mer information om versioner och versioner av kärnkomponenter finns i dokumentet Core Components Versions.

Exempel på komponentutdata sample-component-output

Om du vill se både flikkomponenten och exempel på dess konfigurationsalternativ samt HTML och JSON-utdata går du till komponentbiblioteket.

Teknisk information technical-details

Den senaste tekniska dokumentationen om flikkomponenten finns på GitHub.

Mer information om hur du utvecklar kärnkomponenter finns i dokumentationen för kärnkomponentutvecklare.

Djuplänkning till en panel deep-linking

Flikarna, Carousel, och dragspelskomponenter har stöd för att länka direkt till en panel i komponenten.

Så här gör du:

  1. Visa sidan med komponenten med alternativet Visa som publicerad i sidredigeraren.
  2. Inspect innehållet på sidan och identifierar panelens ID.
    • Till exempel id="accordion-86196c94d3-item-ca319dbb0b"
  3. ID:t blir det ankare som du kan lägga till i URL:en med hjälp av ett hash-tecken (#).
    • Till exempel https://wknd.site/content/wknd/language-masters/en/magazine/western-australia.html#accordion-86196c94d3-item-ca319dbb0b

Om du navigerar till URL-adressen med panel-ID som ankarpunkt, rullar webbläsaren direkt till den aktuella komponenten och visar den angivna panelen. Om panelen inte är konfigurerad att expanderas som standard kommer den att expanderas automatiskt.

Flikdesign och responsiv design responsive-design

Alla kärnkomponenter är utformade för att vara fullt responsiva och ger en sömlös upplevelse på alla enheter.

Vissa avancerade komponenter som Tab-komponenten kan kräva särskild hänsyn i samband med implementeringsprojektet för att behålla svarstiden under alla förhållanden. Mer information finns i dokumentet Responsiv design för kärnkomponenterna.

Dialogrutan Redigera edit-dialog

I redigeringsdialogrutan kan den som skapar innehållet skapa, byta namn på och ordna om flikar samt definiera den aktiva fliken.

Fliken Objekt items-tab

Flikkomponentens objektflik i dialogrutan Redigera

Använd knappen Lägg till för att öppna komponentväljaren och välja vilken komponent som ska läggas till som en flik. När du har lagt till en post läggs den till i listan, som innehåller följande kolumner:

  • Ikon - Ikonen för flikens komponenttyp, vilket gör det enkelt att identifiera i listan. För musen över för att se det fullständiga komponentnamnet som ett verktygstips.
  • Beskrivning - Den beskrivning som används som tabbtext och som standard används som namn på den komponent som har valts för fliken.
  • Ta bort - Tryck eller klicka för att ta bort fliken från flikkomponenten.
  • Ordna om - Tryck eller klicka och dra för att ordna om flikarna.
TIP
Om sidans visningsruta minskas så att redigeringsdialogrutan blir helskärm, döljs knappen Lägg till. Komponenter kan fortfarande läggas till i flikkomponenten genom att dra från komponentwebbläsaren och släppa på flikkomponenten i sidredigeraren.

Fliken Egenskaper properties-tab

Flikkomponentens egenskapflik i dialogrutan Redigera

  • Aktivt objekt - Innehållsförfattaren kan definiera vilken flik som är aktiv när sidan läses in.

    • Med alternativet Standard markeras den första fliken.
  • ID - Med det här alternativet kan du styra den unika identifieraren för komponenten i HTML och i datalagret.

    • Om inget anges genereras ett unikt ID automatiskt åt dig och du hittar det genom att granska den resulterande sidan.
    • Om ett ID anges är det författarens ansvar att se till att det är unikt.
    • Om du ändrar ID:t kan det påverka spårningen av CSS, JS och datalager.

Fliken Tillgänglighet accessibility-tab

Flikkomponentens hjälpmedelsflik i redigeringsdialogrutan

På fliken Hjälpmedel kan värden anges för ARIA-hjälpmedelsetiketter för komponenten.

  • Etikett - Värdet för ett ARIA-etikettattribut för komponenten

Välj panel select-panel

Innehållsförfattaren kan använda alternativet Välj panel i komponentens verktygsfält för att ändra till en annan panel för redigering samt för att enkelt ordna om flikarna.

Välj panelikon

När du har valt alternativet Välj panel i komponentverktygsfältet visas de konfigurerade flikarna som en listruta.

  • Listan ordnas efter flikarnas tilldelade ordning och återspeglas i numreringen.
  • Flikens komponenttyp visas först, följt av tabbbeskrivningen med ett ljusare teckensnitt.

Välj panelläge

  • Om du trycker eller klickar på en post i listrutan växlar vyn i redigeraren till den fliken.
  • Du kan ordna om flikarna på plats med hjälp av draghandtagen.
NOTE
Flikar kan inte markeras av författaren i läget Redigera. Använd läget Förhandsgranska eller alternativet Visa som publicerad om du vill interagera med flikarna på samma sätt som en läsare av det publicerade innehållet.

Designdialogruta design-dialog

I designdialogrutan kan mallskaparen definiera vilka komponenter som kan läggas till som objekt i flikkomponenten samt definiera vilka anpassade format som är tillgängliga för innehållsförfattaren.

Fliken Tillåtna komponenter allowed-components-tab

Fliken Tillåtna komponenter används för att definiera vilka komponenter som innehållsförfattaren kan lägga till som objekt i flikkomponenten.

Fliken Tillåtna komponenter fungerar på samma sätt som fliken med samma namn när du definierar principen och egenskaperna för en layoutbehållare i mallredigeraren.

Fliken Format styles-tab

Tabbar-komponenten stöder AEM Style System.

Adobe-klientdatalager data-layer

Flikkomponenten stöder datalagret Adobe Client.

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