Le widget Onglet utilise l'élément personnalisé <devsite-selector> pour organiser les données à plusieurs représentations, telles que des exemples de code dans différents langages de programmation ou des structures de données représentées par différents formats (tels que JSON, YAML ou ou XML).
Utilisation générale
L'exemple suivant utilise l'élément personnalisé <devsite-selector> pour afficher trois sections d'onglet en HTML.
Titre de l'onglet 1
Tab 1 Contenu
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
semper tortor nec dictum sagittis. Nunc Masa ipsum, mollis non neque sed, vulputate dignissim odio.
Titre de l'onglet 2
Tab 2 Content
Curabitur semper tortor nec dictum sagittis Nunc massa ipsum, mollis non nesed, vulputate dignissim odio. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Titre de l'onglet 3
Tab 3 Contenu
Nunc massa ipsum, mollis non nesed, vulputate dignissim odio. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper
tortor nec dictum sagittis.
L'exemple suivant utilise la syntaxe Markdown pour afficher les trois onglets.
Titre de l'onglet 1
Tab 1 Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper
tortor nec dictum sagittis. Nunc massa ipsum, mollis non nesed,
vulputate dignissim odio.
Titre de l'onglet 2
Tab 2 Contenu
Curbitur semper tortor nec dictum sagittis Nunc massa ipsum, mollis non sed, vulputate dignissim odio. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Titre de l'onglet 3
Tab 3 Contenu
Nunc massa ipsum, mollis non nesed, vulputate dignissim odio. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor
nec dictum sagittis.
Widget d'onglets avec menu à développer
L'exemple suivant utilise l'élément personnalisé <devsite-selector>, mais il existe trop d'onglets à afficher à l'écran et déborde automatiquement dans le menu déroulant Plus.
Pommes
Contenus sur les pommes
Abricots
Contenu sur les avril
Avocats
Contenus sur les avocats
Figues
Contenu à propos des figurines
Raisin
Contenu sur le raisin
Kiwi
Contenu sur les kiwis
Citrons
Contenu relatif aux citrons
Des citrons verts
Contenu sur les citrons verts
Mangues
Contenu sur les mangues
Pêches
Contenu relatif aux pêches
L'exemple suivant utilise la syntaxe Markdown pour afficher le même menu à développer.
Pommes
Contenus sur les pommes
Abricots
Contenu sur les avril
Avocats
Contenus sur les avocats
Figues
Contenu à propos des figurines
Raisin
Contenu sur le raisin
Kiwi
Contenu sur les kiwis
Citrons
Contenu relatif aux citrons
Des citrons verts
Contenu sur les citrons verts
Mangues
Contenu sur les mangues
Pêches
Contenu relatif aux pêches
Noms d'onglets en double dans plusieurs widgets d'onglets
Si vous cliquez sur un onglet, tous les autres onglets de la page comportant le même texte et dans la même syntaxe sont affectés. Par exemple, si vous cliquez sur Apples ou Apricots dans le widget ci-dessous, le deuxième widget de la section précédente sera également affecté, car ils sont créés dans Markdown.
Pommes
Plus de contenus sur les pommes !
Abricots
Plus de contenus sur les sprites.
Personnaliser les widgets d'onglets
Bien que vous puissiez créer le widget Onglet avec Markdown, vous devez utiliser une syntaxe HTML pour attribuer des attributs personnalisés.
Retour à la ligne dans un onglet
Le texte qui dépasse la largeur maximale définie par un onglet défini par DevSite est tronqué et ajouté à l'aide de points de suspension. L'exemple suivant utilise la classe two-line-tab dans l'élément personnalisé <devsite-selector> pour encapsuler le texte dans le deuxième onglet.
Ce libellé long n'est pas encapsulé
Ce libellé ne fait pas l'objet d'un retour à la ligne.
Ce libellé s'affiche sur une deuxième ligne
Le libellé de cet onglet s'affiche sur une deuxième ligne.
Retour à la ligne dans un onglet avec un libellé plus petit
L'exemple suivant définit two-line-tab sur la première ligne et tab-label sur la deuxième ligne dans l'élément personnalisé <devsite-selector> pour afficher une plus petite étiquette sur la deuxième ligne d'un onglet à deux lignes dans le menu déroulant ;
Swift
Cet onglet comporte le libellé Swift.
Java
Le libellé Android est inférieur à celui de Java dans l'onglet à deux lignes.
Kotlin
Le libellé Android est inférieur à celui Kotlin sur cet onglet.
Java
Cet onglet comporte un libellé Java.
Lien direct vers un onglet spécifique
L'exemple suivant renvoie directement vers un onglet spécifique et l'ouvre en spécifiant le id dans l'élément personnalisé <devsite-selector>.
Cobol-
Il s'agit de l'onglet par défaut, mais vous pouvez utiliser l'ancrage #cobol.
Fortran
Vous êtes redirigé directement vers cet onglet en ajoutant l'ancre #fortran à votre lien.
Haskell
Cet onglet utiliserait l'ancre #haskell dans votre lien.
Créer une association avec tous les widgets ouverts dans le même onglet
Le lien suivant ajoute le paramètre de requête ?tab=Apricots à l'URL de cette page et charge la page avec l'onglet avrilicots ouvert sur tous les sélecteurs:
https://www.devsitetest.how/integration-tests/widgets/tabs?tab=Apricots