Tabs-widgetten bruger det tilpassede element <devsite-selector> til at organisere data, der har flere repræsentationer, såsom kodeeksempler i forskellige programmeringssprog eller datastrukturer repræsenteret af forskellige formater (såsom JSON, YAML eller XML).
Generel brug
Følgende eksempel bruger det tilpassede element <devsite-selector> til at gengive tre fanesektioner ved hjælp af HTML.
Fane 1 Titel
Fane 1 Indhold
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 Titel
Fane 2 Indhold
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 Titel
Fane 3 Indhold
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 bruger Markdown-syntaks til at gengive de samme tre faner.
Fane 1 Titel
Fane 1 Indhold
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 Titel
Fane 2 Indhold
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 Titel
Fane 3 Indhold
Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor nec dictum sagittis.
Fane-widget med en overløbsmenu
Følgende eksempel bruger det tilpassede element <devsite-selector> , men har for mange faner til at passe på skærmen og flyder automatisk over i rullemenuen Mere .
Æbler
Indhold om æbler
Abrikoser
Indhold om abrikoser
Avocadoer
Indhold om avocadoer
Fig
Indhold om figner
Druer
Indhold om druer
Kiwi
Indhold om kiwi
Citroner
Indhold om citroner
Limefrugter
Indhold om limefrugter
Mangoer
Indhold om mango
Ferskner
Indhold om ferskner
Følgende eksempel bruger Markdown-syntaks til at gengive den samme overløbsmenu.
Æbler
Indhold om æbler
Abrikoser
Indhold om abrikoser
Avocadoer
Indhold om avocadoer
Fig
Indhold om figner
Druer
Indhold om druer
Kiwi
Indhold om kiwi
Citroner
Indhold om citroner
Limefrugter
Indhold om limefrugter
Mangoer
Indhold om mango
Ferskner
Indhold om ferskner
Dupliker fanenavne i widgets med flere faner
Hvis du klikker på en fane, påvirker det alle andre faner på siden med den samme tekst i samme syntaks. For eksempel, at klikke på enten Æbler eller Abrikoser i widgetten nedenfor påvirker også den anden widget i det forrige afsnit, fordi de begge er bygget med Markdown.
Æbler
Mere indhold om æbler!
Abrikoser
Mere indhold om abrikoser også!
Tilpasning af fane-widgets
Mens du kan bygge fane-widgetten med Markdown, skal du bruge HTML-syntaks til at tildele brugerdefinerede attributter.
Ombryd tekst inden for en fane
Tekst, der overstiger den maksimale bredde for en fane, der er indstillet af DevSite, klippes og tilføjes med ellipser. Følgende eksempel bruger two-line-tab klassen i det brugerdefinerede element <devsite-selector> til at ombryde tekst inden for den anden fane.
Dette er en lang etiket, der ikke pakkes ind
Denne etiket ombrydes ikke til en anden linje.
Denne etiket ombrydes til en anden linje
Etiketten for denne fane ombrydes til en anden linje.
Ombryde tekst inden for en fane med en mindre etiket
Følgende eksempel sætter two-line-tab til den første linje og tab-label til den anden linje i det brugerdefinerede element <devsite-selector> for at vise en mindre etiket på den anden linje af en to-line tab.
Swift
Denne fane har et Swift -mærke.
Java
Denne to-linjers fane har en mindre Android -etiket under Java -etiketten.
Kotlin
Denne to-linjers fane har en mindre Android -etiket under Kotlin -etiketten.
Java
Denne fane har en Java -etiket.
Direkte link til en bestemt fane
Følgende eksempel linker direkte til og åbner en specifik fane ved at angive id i det tilpassede element <devsite-selector> .
Cobol
Denne fane er standard, men du kan bruge #cobol ankeret.
Fortran
Du vil linke direkte til denne fane ved at tilføje #fortran ankeret til dit link.
Haskell
Denne fane ville bruge #haskell ankeret i dit link.
Oprettelse af et link med alle widgets åbnet til den samme fane
Følgende link tilføjer forespørgselsparameteren ?tab=Apricots til denne sides URL og indlæser siden med fanen Abrikoser åben på alle vælgere:
https://www.devsitetest.how/integration-tests/widgets/tabs?tab=Aprikoser