Välilehdet-widget käyttää mukautettua elementtiä <devsite-selector> järjestääkseen tietoja, joilla on useita esityksiä, kuten koodiesimerkkejä eri ohjelmointikielillä tai tietorakenteita, joita edustavat eri muodot (kuten JSON, YAML tai XML).
Yleinen käyttö
Seuraava esimerkki käyttää mukautettua elementtiä <devsite-selector> kolmen välilehden osion hahmontamiseen HTML:n avulla.
Välilehden 1 otsikko
Välilehti 1 Sisältö
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor, muualle luokittelematon dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio.
Välilehden 2 otsikko
Välilehti 2 Sisältö
Curabitur semper tortor, muualle luokittelematon dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Välilehden 3 otsikko
Välilehti 3 Sisältö
Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor, muualle luokittelematon dictum sagittis.
Seuraava esimerkki käyttää Markdown-syntaksia samojen kolmen välilehden hahmontamiseen.
Välilehden 1 otsikko
Välilehti 1 Sisältö
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor, muualle luokittelematon dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio.
Välilehden 2 otsikko
Välilehti 2 Sisältö
Curabitur semper tortor, muualle luokittelematon dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Välilehden 3 otsikko
Välilehti 3 Sisältö
Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor, muualle luokittelematon dictum sagittis.
Välilehdet-widget, jossa on ylivuotovalikko
Seuraava esimerkki käyttää mukautettua elementtiä <devsite-selector> , mutta siinä on liian monta välilehteä, jotta se mahtuu näytölle, ja se vuotaa automaattisesti avattavaan Lisää -valikkoon.
Omenat
Sisältö omenoista
Aprikoosit
Sisältöä aprikooseista
Avokadot
Sisältö avokadoista
kuviot
Sisältö viikunoista
Rypäleet
Sisältöä viinirypäleistä
Kiivi
Sisältöä kiiveistä
Sitruunat
Sisältöä sitruunoista
Limetit
Sisältöä limetistä
Mangot
Sisältöä mangoista
Persikat
Sisältö persikoista
Seuraava esimerkki käyttää Markdown-syntaksia saman ylivuotovalikon hahmontamiseen.
Omenat
Sisältö omenoista
Aprikoosit
Sisältöä aprikooseista
Avokadot
Sisältö avokadoista
kuviot
Sisältö viikunoista
Rypäleet
Sisältöä viinirypäleistä
Kiivi
Sisältöä kiiveistä
Sitruunat
Sisältöä sitruunoista
Limetit
Sisältöä limetistä
Mangot
Sisältöä mangoista
Persikat
Sisältö persikoista
Päällekkäiset välilehtien nimet useissa välilehtien widgeteissä
Välilehden napsauttaminen vaikuttaa kaikkiin muihin välilehtiin sivulla, joissa on sama teksti samassa syntaksissa. Esimerkiksi Omenoiden tai Aprikoosien napsauttaminen alla olevassa widgetissä vaikuttaa myös edellisen osan toiseen widgetiin, koska ne molemmat on rakennettu Markdownin avulla.
Omenat
Lisää sisältöä omenoista!
Aprikoosit
Lisää sisältöä myös aprikooseista!
Välilehtien widgetien mukauttaminen
Vaikka voit rakentaa välilehdet-widgetin Markdownin avulla, sinun on käytettävä HTML-syntaksia mukautettujen attribuuttien määrittämiseen.
Tekstin rivitys välilehdellä
Teksti, joka ylittää DevSiten asettaman välilehden enimmäisleveyden, leikataan ja lisätään ellipseillä. Seuraava esimerkki käyttää two-line-tab luokkaa mukautetun elementin <devsite-selector> sisällä rivittääkseen tekstin toiseen välilehteen.
Tämä on pitkä etiketti, joka ei kääre
Tämä tarra ei kietoudu toiselle riville.
Tämä tarra rivittyy toiselle riville
Tämän välilehden otsikko rivittyy toiselle riville.
Tekstin rivitys välilehdellä pienemmällä tunnisteella
Seuraava esimerkki asettaa two-line-tab ensimmäiselle riville ja tab-label labelin toiselle riville mukautetun elementin <devsite-selector> sisällä, jotta kaksirivisen välilehden toisella rivillä näkyy pienempi tarra.
Swift
Tällä välilehdellä on Swift -tunniste.
Java
Tällä kaksirivisellä välilehdellä on pienempi Android -tunniste Java -tunnisteen alla.
Kotlin
Tällä kaksirivisellä välilehdellä on pienempi Android -tarra Kotlin -tunnisteen alla.
Java
Tällä välilehdellä on Java -tunniste.
Suora linkki tiettyyn välilehteen
Seuraava esimerkki linkittää suoraan tiettyyn välilehteen ja avaa sen määrittämällä id mukautetussa elementissä <devsite-selector> .
Cobol
Tämä välilehti on oletusarvo, mutta voit käyttää #cobol ankkuria.
Fortran
Linkität suoraan tähän välilehteen liittämällä #fortran ankkurin linkkiisi.
Haskell
Tämä välilehti käyttäisi linkissäsi olevaa #haskell -ankkuria.
Luodaan linkki, jossa kaikki widgetit on avattu samalle välilehdelle
Seuraava linkki liittää kyselyparametrin ?tab=Apricots tämän sivun URL-osoitteeseen ja lataa sivun, jossa Aprikoosit -välilehti on avoinna kaikissa valitsimissa:
https://www.devsitetest.how/integration-tests/widgets/tabs?tab=Apricots