Tabbar-komponent

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

Användning

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

The redigeringsdialogruta gör att innehållsförfattaren kan definiera flera flikar samt ställa in den aktiva fliken. Använda designdialogrutakan mallskaparen definiera vilka komponenter som kan läggas till på flikar och anpassa formaten.

TIPS

Kapslade flikkomponenter (tabbar inom tabbar) stöds.

Du kan hitta/välja enkla (ej kapslade) flikkomponenter med innehållsträdmen kapslade flikar kan inte användas.

Version och kompatibilitet

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 Huvudkomponentversioner.

Exempel på komponentutdata

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

Teknisk information

Den senaste tekniska dokumentationen om Tabs-komponenten finns på GitHub.

Mer information om hur du utvecklar kärnkomponenter finns i Dokumentation för grundkomponentutvecklare.

Djuplänkning till en panel

Flikarna 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 hjälp av 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 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.

Dialogrutan Redigera

I redigeringsdialogrutan kan författaren skapa, byta namn på och ordna om flikar samt definiera den aktiva fliken.

Fliken Objekt

Fliken Alternativ i dialogrutan Redigera flikkomponent

Använd Lägg till för att öppna komponentväljaren och välja vilken komponent som ska läggas till som en tabb. 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 - Beskrivningen som används som tabbtext och används som standard för namnet på komponenten som är markerad för tabben.
  • Ta bort - Tryck eller klicka för att ta bort fliken från tabbkomponenten.
  • Ordna om - Tryck eller klicka och dra för att ändra ordningen på flikarna.
TIPS

Om sidans visningsruta minskas så att redigeringsdialogrutan blir helskärm, Lägg till knappen döljs. Komponenter kan fortfarande läggas till i flikkomponenten av dra från komponentwebbläsaren och släppa på flikkomponenten i sidredigeraren.

Fliken Egenskaper

Fliken Egenskaper i dialogrutan Redigera för flikkomponenter

  • Aktivt objekt - Innehållsförfattaren kan definiera vilken flik som är aktiv när sidan läses in.
    • Med Standard väljer du den första fliken.
  • ID - Med det här alternativet kan du styra den unika identifieraren för komponenten i HTML och i Datalager.
    • 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

Flikkomponentens flik i dialogrutan Redigera hjälpmedel

Tillgänglighet -tabb kan värden anges för Tillgänglighet för ARIA -etiketter för komponenten.

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

Välj panel

Innehållsförfattaren kan använda 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 tabbordningen.

Ikonen Välj panel

När du har valt 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 panelpekare

  • 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.
OBSERVERA

Flikarna kan inte markeras av författaren i Redigera läge. Använd Förhandsgranska eller Visa som publicerad om du vill interagera med flikarna på samma sätt som en läsare av det publicerade innehållet.

Designdialogruta

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

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

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

Fliken Format

Tabbar-komponenten har stöd för AEM Formatsystem.

Adobe-klientdatalager

Tabbar-komponenten har stöd för Adobe Client Data Layer.

På denna sida