Tabs-widgeten bruker det tilpassede elementet <devsite-selector> for å organisere data som har flere representasjoner, for eksempel kodeeksempler i forskjellige programmeringsspråk eller datastrukturer representert av forskjellige formater (som JSON, YAML eller XML).
Generell bruk
Følgende eksempel bruker det tilpassede elementet <devsite-selector> for å gjengi tre faneseksjoner ved hjelp av HTML.
Fane 1 Tittel
Fane 1 Innhold
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio.
Fane 2 Tittel
Fane 2 Innhold
Curabitur semper tortor nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fane 3 Tittel
Fane 3 Innhold
Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor nec dictum sagittis.
Følgende eksempel bruker Markdown-syntaks for å gjengi de samme tre fanene.
Fane 1 Tittel
Fane 1 Innhold
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio.
Fane 2 Tittel
Fane 2 Innhold
Curabitur semper tortor nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fane 3 Tittel
Fane 3 Innhold
Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor nec dictum sagittis.
Tabs-widget med en overløpsmeny
Følgende eksempel bruker det tilpassede elementet <devsite-selector> , men har for mange faner til å passe på skjermen og flyter automatisk over i rullegardinmenyen Mer .
Epler
Innhold om epler
Aprikoser
Innhold om aprikoser
Avokado
Innhold om avokado
fig
Innhold om fiken
Druer
Innhold om druer
Kiwi
Innhold om kiwi
Sitroner
Innhold om sitroner
Lime
Innhold om lime
Mango
Innhold om mango
Ferskener
Innhold om fersken
Følgende eksempel bruker Markdown-syntaks for å gjengi den samme overløpsmenyen.
Epler
Innhold om epler
Aprikoser
Innhold om aprikoser
Avokado
Innhold om avokado
fig
Innhold om fiken
Druer
Innhold om druer
Kiwi
Innhold om kiwi
Sitroner
Innhold om sitroner
Lime
Innhold om lime
Mango
Innhold om mango
Ferskener
Innhold om fersken
Dupliser fanenavn i moduler for flere faner
Å klikke på en fane påvirker alle andre faner på siden med samme tekst i samme syntaks. For eksempel, å klikke på enten epler eller aprikoser i widgeten nedenfor påvirker også den andre widgeten i forrige seksjon fordi de begge er bygget med Markdown.
Epler
Mer innhold om epler!
Aprikoser
Mer innhold om aprikoser også!
Tilpasse fane-widgets
Mens du kan bygge fane-widgeten med Markdown, må du bruke HTML-syntaks for å tilordne egendefinerte attributter.
Bryte tekst i en fane
Tekst som overskrider den maksimale bredden for en fane satt av DevSite, klippes og legges til med ellipser. Følgende eksempel bruker two-line-tab klassen i det tilpassede elementet <devsite-selector> for å bryte tekst i den andre fanen.
Dette er en lang etikett som ikke pakkes inn
Denne etiketten omsluttes ikke til en annen linje.
Denne etiketten omsluttes til en andre linje
Etiketten for denne fanen omsluttes til en andre linje.
Bryte tekst i en fane med en mindre etikett
Følgende eksempel setter two-line-tab til den første linjen og tab-label til den andre linjen i det tilpassede elementet <devsite-selector> for å vise en mindre etikett på den andre linjen i en to-linjers fane.
Fort
Denne kategorien har en Swift -etikett.
Java
Denne to-linjers fanen har en mindre Android -etikett under Java -etiketten.
Kotlin
Denne to-linjers fanen har en mindre Android -etikett under Kotlin -etiketten.
Java
Denne kategorien har en Java -etikett.
Direkte kobling til en bestemt fane
Følgende eksempel kobler direkte til og åpner en bestemt fane ved å spesifisere id -en i det tilpassede elementet <devsite-selector> .
Cobol
Denne kategorien er standard, men du kan bruke #cobol ankeret.
Fortran
Du kan koble direkte til denne fanen ved å legge til #fortran ankeret til lenken din.
Haskell
Denne fanen vil bruke #haskell ankeret i lenken din.
Opprette en kobling med alle widgets åpnet til samme fane
Følgende kobling legger til søkeparameteren ?tab=Apricots til denne sidens URL og laster inn siden med fanen Aprikoser åpen på alle velgere:
https://www.devsitetest.how/integration-tests/widgets/tabs?tab=Aprikoser