Composant Onglet
Ce composant permet de créer un système d'onglets DSFR.
Le système d'onglets se compose de deux blocs imbriqués :
tabs: le conteneur global du système d'ongletstab: chaque onglet individuel, avec son libellé et son contenu
Onglets simples
Composant
Contenu du premier onglet.
- Point 1
- Point 2
Contenu du deuxième onglet.
Contenu du troisième onglet.
Extrait de code
/// tabs
/// tab | Onglet 1
Contenu du **premier** onglet.
- Point 1
- Point 2
///
/// tab | Onglet 2
Contenu du *deuxième* onglet.
///
/// tab | Onglet 3
Contenu du troisième onglet.
///
///
Options du conteneur tabs
| Option | Valeur par défaut | Description |
|---|---|---|
| label | Système d'onglets | Libellé accessible du système d'onglets (attribut aria-label de la liste d'onglets) |
| viewport_width | false | Si true, le système d'onglets prend toute la largeur de la fenêtre |
Options de chaque tab
| Option | Valeur par défaut | Description |
|---|---|---|
| selected | false | Si true, l'onglet est sélectionné par défaut. Le premier onglet est automatiquement sélectionné si aucun n'est explicitement marqué |
| icon | Icône Remix Icon à afficher à gauche du libellé de l'onglet (ex: checkbox-circle-line). Le préfixe fr-icon- est ajouté automatiquement |
Exemples avancés
Onglets avec libellé accessible personnalisé
Composant
Les dernières actualités du projet.
Accédez à la documentation technique.
Extrait de code
/// tabs
label: Navigation par catégorie
/// tab | Actualités
Les dernières actualités du projet.
///
/// tab | Documentation
Accédez à la documentation technique.
///
///
Onglets avec icônes
Composant
Contenu de l'onglet Accueil.
Contenu de l'onglet Paramètres.
Contenu de l'onglet Notifications.
Extrait de code
/// tabs
/// tab | Accueil
icon: home-4-line
Contenu de l'onglet Accueil.
///
/// tab | Paramètres
icon: settings-5-line
Contenu de l'onglet Paramètres.
///
/// tab | Notifications
icon: notification-3-line
Contenu de l'onglet Notifications.
///
///
Onglet sélectionné par défaut
Composant
Contenu du premier onglet.
Cet onglet est sélectionné par défaut.
Contenu du troisième onglet.
Extrait de code
/// tabs
/// tab | Premier
Contenu du premier onglet.
///
/// tab | Deuxième
selected: true
Cet onglet est sélectionné par défaut.
///
/// tab | Troisième
Contenu du troisième onglet.
///
///
Pleine largeur de la fenêtre
Composant
Extrait de code
/// tabs
viewport_width: true
/// tab | Onglet large 1
Ce système d'onglets prend toute la largeur de la fenêtre.
///
/// tab | Onglet large 2
Deuxième panneau en pleine largeur.
///
///