Tabs-widgeten använder det anpassade elementet <devsite-selector> för att organisera data som har flera representationer, till exempel kodexempel i olika programmeringsspråk eller datastrukturer som representeras av olika format (som JSON, YAML eller XML).
Allmänt bruk
Följande exempel använder det anpassade elementet <devsite-selector> för att rendera tre flikavsnitt med HTML.
Tab 1 Titel
Flik 1 Innehåll
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio.
Tab 2 Titel
Flik 2 Innehåll
Curabitur semper tortor nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Tab 3 Titel
Flik 3 Innehåll
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öljande exempel använder Markdown-syntax för att återge samma tre flikar.
Tab 1 Titel
Flik 1 Innehåll
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio.
Tab 2 Titel
Flik 2 Innehåll
Curabitur semper tortor nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Tab 3 Titel
Flik 3 Innehåll
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 överfyllnadsmeny
Följande exempel använder det anpassade elementet <devsite-selector> men har för många flikar för att få plats på skärmen och rinner automatiskt över i rullgardinsmenyn Mer .
Äpplen
Innehåll om äpplen
Aprikoser
Innehåll om aprikoser
Avokado
Innehåll om avokado
FIG
Innehåll om fikon
Vindruvor
Innehåll om druvor
Kiwi frukt
Innehåll om kiwifrukt
Citroner
Innehåll om citroner
Limefrukter
Innehåll om limefrukter
Mango
Innehåll om mango
Persikor
Innehåll om persikor
Följande exempel använder Markdown-syntax för att återge samma överflödesmeny.
Äpplen
Innehåll om äpplen
Aprikoser
Innehåll om aprikoser
Avokado
Innehåll om avokado
FIG
Innehåll om fikon
Vindruvor
Innehåll om druvor
Kiwi frukt
Innehåll om kiwifrukt
Citroner
Innehåll om citroner
Limefrukter
Innehåll om limefrukter
Mango
Innehåll om mango
Persikor
Innehåll om persikor
Duplicera fliknamn i widgets med flera flikar
Att klicka på en flik påverkar alla andra flikar på sidan med samma text i samma syntax. Om du till exempel klickar på antingen Äpplen eller Aprikoser i widgeten nedan påverkar det också den andra widgeten i föregående avsnitt eftersom de båda är byggda med Markdown.
Äpplen
Mer innehåll om äpplen!
Aprikoser
Mer innehåll om aprikoser också!
Anpassa flikwidgetar
Även om du kan bygga flikwidgeten med Markdown, måste du använda HTML-syntax för att tilldela anpassade attribut.
Radbryta text inom en flik
Text som överskrider maxbredden för en flik som ställts in av DevSite klipps ut och läggs till med ellipser. Följande exempel använder klassen two-line-tab inom det anpassade elementet <devsite-selector> för att radbryta text inom den andra fliken.
Detta är en lång etikett som inte lindas in
Den här etiketten lindas inte till en annan rad.
Denna etikett lindas till en andra rad
Etiketten för denna flik lindas till en andra rad.
Radbryta text inom en flik med en mindre etikett
Följande exempel ställer in two-line-tab till den första raden och tab-label till den andra raden inom det anpassade elementet <devsite-selector> för att visa en mindre etikett på den andra raden på en två-rads flik.
Snabb
Den här fliken har en Swift- etikett.
Java
Denna tvåraders flik har en mindre Android- etikett under Java -etiketten.
Kotlin
Denna tvåraders flik har en mindre Android- etikett under Kotlin -etiketten.
Java
Den här fliken har en Java -etikett.
Direktlänk till en specifik flik
Följande exempel länkar direkt till och öppnar en specifik flik genom att ange id :t i det anpassade elementet <devsite-selector> .
Cobol
Den här fliken är standard, men du kan använda #cobol ankaret.
Fortran
Du skulle länka direkt till den här fliken genom att lägga till #fortran ankaret till din länk.
Haskell
Den här fliken skulle använda #haskell ankaret i din länk.
Skapa en länk med alla widgets öppnade till samma flik
Följande länk lägger till frågeparametern ?tab=Apricots till denna sidas URL och laddar sidan med fliken Aprikoser öppen på alla väljare:
https://www.devsitetest.how/integration-tests/widgets/tabs?tab=Aprikoser