El giny de pestanyes utilitza l'element personalitzat <devsite-selector> per organitzar dades que tenen múltiples representacions, com ara exemples de codi en diferents llenguatges de programació o estructures de dades representades per diferents formats (com ara JSON, YAML o XML).
Ús general
L'exemple següent utilitza l'element personalitzat <devsite-selector> per representar tres seccions de pestanyes mitjançant HTML.
Pestanya 1 Títol
Pestanya 1 Contingut
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sempre torttor nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio.
Títol de la pestanya 2
Pestanya 2 Contingut
Curabitur sempre torttor nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pestanya 3 Títol
Pestanya 3 Contingut
Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sempre torttor nec dictum sagittis.
L'exemple següent utilitza la sintaxi de Markdown per representar les mateixes tres pestanyes.
Pestanya 1 Títol
Pestanya 1 Contingut
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sempre torttor nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio.
Títol de la pestanya 2
Pestanya 2 Contingut
Curabitur sempre torttor nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pestanya 3 Títol
Pestanya 3 Contingut
Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sempre torttor nec dictum sagittis.
Giny de pestanyes amb un menú desbordant
L'exemple següent utilitza l'element personalitzat <devsite-selector> però té massa pestanyes per cabre a la pantalla i es desborda automàticament al menú desplegable Més .
Pomes
Contingut sobre pomes
Albercocs
Contingut sobre albercocs
Alvocats
Contingut sobre alvocats
Figs
Contingut sobre les figues
Raïms
Contingut sobre el raïm
Kiwi
Contingut sobre kiwi
Llimones
Contingut sobre llimones
Llimes
Contingut sobre llimes
Mangos
Contingut sobre mangos
Préssecs
Contingut sobre préssecs
L'exemple següent utilitza la sintaxi de Markdown per representar el mateix menú de desbordament.
Pomes
Contingut sobre pomes
Albercocs
Contingut sobre albercocs
Alvocats
Contingut sobre alvocats
Figs
Contingut sobre les figues
Raïms
Contingut sobre el raïm
Kiwi
Contingut sobre kiwi
Llimones
Contingut sobre llimones
Llimes
Contingut sobre llimes
Mangos
Contingut sobre mangos
Préssecs
Contingut sobre préssecs
Duplicar els noms de les pestanyes en ginys de diverses pestanyes
Fer clic a una pestanya afecta totes les altres pestanyes de la pàgina amb el mateix text amb la mateixa sintaxi. Per exemple, fer clic a Pomes o albercocs al giny següent també afecta el segon giny de la secció anterior perquè tots dos estan creats amb Markdown.
Pomes
Més contingut sobre pomes!
Albercocs
Més contingut sobre albercocs, també!
Personalització de widgets de pestanyes
Tot i que podeu crear el giny de pestanyes amb Markdown, heu d'utilitzar la sintaxi HTML per assignar atributs personalitzats.
Embolcall de text dins d'una pestanya
El text que supera l'amplada màxima d'una pestanya establerta per DevSite es retalla i s'afegeix amb el·lipses. L'exemple següent utilitza la classe two-line-tab dins de l'element personalitzat <devsite-selector> per embolicar el text dins de la segona pestanya.
Aquesta és una etiqueta llarga que no s'embolica
Aquesta etiqueta no s'ajusta a una altra línia.
Aquesta etiqueta s'ajusta a una segona línia
L'etiqueta d'aquesta pestanya s'ajusta a una segona línia.
Embolcall del text dins d'una pestanya amb una etiqueta més petita
L'exemple següent estableix two-line-tab a la primera línia i tab-label a la segona línia dins de l'element personalitzat <devsite-selector> per mostrar una etiqueta més petita a la segona línia d'una pestanya de dues línies.
Ràpid
Aquesta pestanya té una etiqueta Swift .
Java
Aquesta pestanya de dues línies té una etiqueta d'Android més petita sota l'etiqueta de Java .
Kotlin
Aquesta pestanya de dues línies té una etiqueta d'Android més petita sota l'etiqueta de Kotlin .
Java
Aquesta pestanya té una etiqueta Java .
Enllaç directe a una pestanya específica
L'exemple següent enllaça directament i obre una pestanya específica especificant l' id dins de l'element personalitzat <devsite-selector> .
Cobol
Aquesta pestanya és la predeterminada, però podeu utilitzar l'àncora #cobol .
Fortran
Enllaceu directament a aquesta pestanya afegint l'àncora #fortran al vostre enllaç.
Haskell
Aquesta pestanya utilitzaria l'àncora #haskell al vostre enllaç.
Creació d'un enllaç amb tots els ginys oberts a la mateixa pestanya
L'enllaç següent afegeix el paràmetre de consulta ?tab=Apricots a l'URL d'aquesta pàgina i carrega la pàgina amb la pestanya Albercocs oberta a tots els selectors:
https://www.devsitetest.how/integration-tests/widgets/tabs?tab=Albercots