Skirtukų valdiklis naudoja priskirtą elementą <devsite-selector> , kad tvarkytų duomenis, kurie turi kelis atvaizdus, pvz., kodų pavyzdžius skirtingomis programavimo kalbomis arba duomenų struktūras, atstovaujamas skirtingais formatais (pvz., JSON, YAML arba XML).
Bendras naudojimas
Šiame pavyzdyje naudojamas priskirtas elementas <devsite-selector> , kad būtų galima pateikti tris skirtukų skyrius naudojant HTML.
1 skirtuko pavadinimas
1 skirtukas Turinys
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio.
2 skirtuko pavadinimas
2 skirtukas Turinys
Curabitur semper tortor nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
3 skirtuko pavadinimas
3 skirtukas Turinys
Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor nec dictum sagittis.
Toliau pateiktame pavyzdyje naudojama Markdown sintaksė, kad būtų pateikti tie patys trys skirtukai.
1 skirtuko pavadinimas
1 skirtukas Turinys
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio.
2 skirtuko pavadinimas
2 skirtukas Turinys
Curabitur semper tortor nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
3 skirtuko pavadinimas
3 skirtukas Turinys
Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor nec dictum sagittis.
Skirtukų valdiklis su perpildymo meniu
Toliau pateiktame pavyzdyje naudojamas priskirtas elementas <devsite-selector> , tačiau jame yra per daug skirtukų, kad tilptų ekrane, ir automatiškai persipila į išskleidžiamąjį meniu Daugiau .
Obuoliai
Turinys apie obuolius
Abrikosai
Turinys apie abrikosus
Avokadai
Turinys apie avokadus
Fig
Turinys apie figas
Vynuogės
Turinys apie vynuoges
Kivi vaisius
Turinys apie kivius
Citrinos
Turinys apie citrinas
Liepos
Turinys apie liepas
Mangai
Turinys apie mangus
Persikai
Turinys apie persikus
Šiame pavyzdyje naudojama Markdown sintaksė, kad būtų pateiktas tas pats perpildymo meniu.
Obuoliai
Turinys apie obuolius
Abrikosai
Turinys apie abrikosus
Avokadai
Turinys apie avokadus
Fig
Turinys apie figas
Vynuogės
Turinys apie vynuoges
Kivi vaisius
Turinys apie kivius
Citrinos
Turinys apie citrinas
Liepos
Turinys apie liepas
Mangai
Turinys apie mangus
Persikai
Turinys apie persikus
Pasikartojantys skirtukų pavadinimai keliuose skirtukų valdikliuose
Spustelėjus skirtuką, paveikiami visi kiti puslapio skirtukai, kurių tekstas yra tas pats tos pačios sintaksės. Pavyzdžiui, toliau esančiame valdiklyje spustelėjus Obuoliai arba Abrikosai taip pat paveiks antrąjį valdiklį ankstesniame skyriuje, nes jie abu sukurti naudojant Markdown.
Obuoliai
Daugiau turinio apie obuolius!
Abrikosai
Taip pat daugiau turinio apie abrikosus!
Skirtukų valdiklių tinkinimas
Nors galite kurti skirtukų valdiklį naudodami Markdown, jums reikia naudoti HTML sintaksę, kad priskirtumėte pasirinktinius atributus.
Teksto apvyniojimas skirtuke
Tekstas, viršijantis maksimalų DevSite nustatytą skirtuko plotį, yra iškirptas ir pridedamas elipsėmis. Šiame pavyzdyje naudojama two-line-tab klasė pasirinktiniame elemente <devsite-selector> , kad būtų apvyniotas tekstas antrajame skirtuke.
Tai ilga etiketė, kuri nevyniojama
Ši etiketė nepertraukiama į kitą eilutę.
Ši etiketė perkeliama į antrą eilutę
Šio skirtuko etiketė perkeliama į antrą eilutę.
Teksto įvyniojimas į skirtuką su mažesne etikete
Šiame pavyzdyje pasirinktinio elemento <devsite-selector> two-line-tab nustatomas pirmoje eilutėje, o tab-label – antrajame lange, kad antroje dviejų eilučių skirtuko eilutėje būtų rodoma mažesnė etiketė.
Swift
Šis skirtukas turi „ Swift “ etiketę.
Java
Šiame dviejų eilučių skirtuke po „ Java “ etikete yra mažesnė „Android“ etiketė.
Kotlinas
Šis dviejų eilučių skirtukas turi mažesnę „Android“ etiketę po „ Kotlin “ etikete.
Java
Šis skirtukas turi „ Java “ etiketę.
Tiesioginė nuoroda į konkretų skirtuką
Šis pavyzdys tiesiogiai susieja ir atidaro konkretų skirtuką, nurodant id pasirinktiniame elemente <devsite-selector> .
Cobol
Šis skirtukas yra numatytasis, bet galite naudoti #cobol inkarą.
Fortranas
Tiesiogiai susietumėte su šiuo skirtuku, prie nuorodos #fortran inkarą.
Haskell
Šiame skirtuke jūsų nuorodoje būtų naudojamas #haskell inkaras.
Nuorodos kūrimas su visais valdikliais, atidarytais tame pačiame skirtuke
Ši nuoroda prideda užklausos parametrą ?tab=Apricots prie šio puslapio URL ir įkeliamas puslapis su visuose parinkikliuose atidarytu Abrikosų skirtuku:
https://www.devsitetest.how/integration-tests/widgets/tabs?tab=Apricots