Gradnik zavihkov uporablja element po meri <devsite-selector> za organizacijo podatkov, ki imajo več predstavitev, kot so primeri kode v različnih programskih jezikih ali podatkovne strukture, ki jih predstavljajo različni formati (kot so JSON, YAML ali XML).
Splošna uporaba
Naslednji primer uporablja element po meri <devsite-selector> za upodabljanje treh razdelkov zavihkov z uporabo HTML.
Naslov zavihka 1
Zavihek 1 Vsebina
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio.
Naslov zavihka 2
Zavihek 2 Vsebina
Curabitur semper tortor nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Naslov zavihka 3
Zavihek 3 Vsebina
Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor nec dictum sagittis.
Naslednji primer uporablja sintakso Markdown za upodabljanje istih treh zavihkov.
Naslov zavihka 1
Zavihek 1 Vsebina
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio.
Naslov zavihka 2
Zavihek 2 Vsebina
Curabitur semper tortor nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Naslov zavihka 3
Zavihek 3 Vsebina
Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor nec dictum sagittis.
Pripomoček za zavihke s prelivnim menijem
Naslednji primer uporablja element po meri <devsite-selector> , vendar ima preveč zavihkov, da bi se prilegali na zaslon, in se samodejno prelije v spustni meni Več .
Jabolka
Vsebina o jabolkih
marelice
Vsebina o marelicah
avokado
Vsebina o avokadu
sl
Vsebina o figah
Grozdje
Vsebina o grozdju
Kivi
Vsebina o kiviju
limone
Vsebina o limonah
Limete
Vsebina o limetah
Mango
Vsebina o mangu
Breskve
Vsebina o breskvah
Naslednji primer uporablja sintakso Markdown za upodabljanje istega prelivnega menija.
Jabolka
Vsebina o jabolkih
marelice
Vsebina o marelicah
avokado
Vsebina o avokadu
sl
Vsebina o figah
Grozdje
Vsebina o grozdju
Kivi
Vsebina o kiviju
limone
Vsebina o limonah
Limete
Vsebina o limetah
Mango
Vsebina o mangu
Breskve
Vsebina o breskvah
Podvojena imena zavihkov v pripomočkih za več zavihkov
Klik na zavihek vpliva na vse druge zavihke na strani z enakim besedilom v isti sintaksi. Če na primer kliknete Jabolka ali Marelice v spodnjem pripomočku, vpliva tudi na drugi pripomoček v prejšnjem razdelku, ker sta oba zgrajena z Markdownom.
Jabolka
Več vsebine o jabolkih!
marelice
Več vsebine tudi o marelicah!
Prilagajanje pripomočkov za zavihke
Čeprav lahko z Markdownom sestavite gradnik zavihkov, morate za dodelitev atributov po meri uporabiti sintakso HTML.
Previjanje besedila znotraj zavihka
Besedilo, ki presega največjo širino za zavihek, ki ga je nastavilo DevSite, je izrezano in priloženo s elipsami. Naslednji primer uporablja razred two-line-tab znotraj elementa po meri <devsite-selector> za ovijanje besedila znotraj drugega zavihka.
To je dolga etiketa, ki se ne zavije
Ta oznaka se ne prevleče v drugo vrstico.
Ta oznaka se ovije v drugo vrstico
Oznaka za ta zavihek se prelevi v drugo vrstico.
Previjanje besedila znotraj zavihka z manjšo oznako
Naslednji primer nastavi two-line-tab na prvo vrstico in tab-label na drugo vrstico znotraj elementa po meri <devsite-selector> za prikaz manjše oznake v drugi vrstici dvovrstičnega zavihka.
Swift
Ta zavihek ima oznako Swift .
Java
Ta dvovrstični zavihek ima manjšo oznako Android pod oznako Java .
Kotlin
Ta dvovrstični zavihek ima manjšo oznako Android pod oznako Kotlin .
Java
Ta zavihek ima oznako Java .
Neposredna povezava do določenega zavihka
Naslednji primer se neposredno poveže z določenim zavihkom in ga odpre tako, da podate id znotraj elementa po meri <devsite-selector> .
Cobol
Ta zavihek je privzet, vendar lahko uporabite sidro #cobol .
Fortran
Na ta zavihek bi se neposredno povezali tako, da svoji povezavi dodate sidro #fortran .
Haskell
Ta zavihek bi v vaši povezavi uporabil sidro #haskell .
Ustvarjanje povezave z vsemi pripomočki, odprtimi na istem zavihku
Naslednja povezava doda poizvedbeni parameter ?tab=Apricots k URL-ju te strani in naloži stran z odprtim zavihkom Marelice na vseh izbirnikih:
https://www.devsitetest.how/integration-tests/widgets/tabs?tab=Apricots