Le bloc Onglets affiche plusieurs contenus au même endroit : le visiteur passe de l’un à l’autre par une barre d’onglets. Cette page décrit les blocs qui le composent, chacun de ses réglages et son comportement sur téléphone et au clavier.
Ajouter le bloc
Insérez le bloc Onglets (Ajouter un bloc). Il arrive avec sa barre de navigation, sa zone de panneaux et un premier onglet. Vous écrivez le contenu dans les panneaux : la barre se construit seule à partir d’eux.
Pour ajouter un onglet, vous avez trois chemins. Chacun crée au bon rang un panneau et son onglet dans la barre.
- Le bouton Ajouter un onglet, sous le bloc, ajoute l’onglet en dernier. Il s’affiche quand le bloc Onglets ou l’un de ses blocs est sélectionné.
- Le + de la zone des panneaux ajoute un onglet sans ouvrir la liste des blocs.
- Sur un panneau, Ajouter avant ou Ajouter après dans le menu ⋮ du bloc, ou
Ctrl+Alt+TetCtrl+Alt+Y, ajoutent un onglet juste avant ou juste après.
Supprimez ou déplacez un panneau : son onglet le suit. La barre ne se modifie pas à la main.
Les blocs qui composent les onglets
| Bloc | Rôle | États |
|---|---|---|
| Navigation des onglets | La barre, une rangée que vous disposez dans son panneau Mise en page flex. Elle accepte un Conteneur avant la bande d’onglets et un autre après. | Par défaut, Survol |
| Bande d’onglets | Les onglets et les flèches, dans la barre. | Par défaut, Survol |
| Élément de navigation des onglets | Un onglet. Il accepte du texte, une icône ou une image. | Par défaut, Survol, Focus, Actif |
| Forme d’indicateur d’onglet | Un onglet en forme de pastille, avec le style de navigation Formes. | Par défaut, Survol |
| Panneaux des onglets | La zone qui contient les panneaux. | Par défaut, Survol |
| Panneau d’onglet | Le contenu d’un onglet. Il accepte n’importe quel bloc. | Par défaut, Survol, Actif |
| Bouton de navigation | Les flèches précédent et suivant. Une flèche accepte un texte, une icône ou un Conteneur. | Par défaut, Survol, Focus, Désactivé |
Régler les onglets
Sélectionnez le bloc Onglets, ouvrez l’onglet Réglages puis le panneau Réglages des onglets. Certains réglages ne s’affichent qu’avec un mode de rotation, une position de flèches ou un autre réglage : la colonne Effet le précise.
| Réglage | Effet | Valeur par défaut |
|---|---|---|
| Style de la navigation | Blocs de contenu : chaque onglet est composé de blocs (texte, icône, image). Formes : chaque onglet est une forme dont vous réglez la couleur, la taille et la bordure. | Blocs de contenu |
| Onglet actif par défaut | L’onglet ouvert au chargement de la page. Aucun onglet actif n’ouvre aucun panneau avant que le visiteur choisisse un onglet. | Onglet 1 |
| Afficher les panneaux voisins | Aligne les panneaux côte à côte : le panneau ouvert au milieu, ses voisins qui dépassent sur les bords. Le visiteur clique sur un voisin pour l’ouvrir. | Désactivé |
| Mode de rotation | Manuelle : le visiteur choisit l’onglet. Auto : les onglets changent seuls, à intervalle régulier. Les deux : les onglets changent seuls et le visiteur peut choisir. | Manuelle |
| Position de la navigation | Place la barre Haut, Droite, Bas ou Gauche des panneaux. | Haut |
| Désactiver la navigation par flèches | Retire les flèches précédent et suivant. En mode Manuelle ou Les deux. | Désactivé |
| Emplacement des flèches | Dans la barre de navigation ou Autour des panneaux. Quand les flèches sont affichées. | Dans la barre de navigation |
| Flèches en surimpression | Pose les flèches par-dessus le contenu des panneaux au lieu de les placer à côté. Avec les flèches Autour des panneaux. | Désactivé |
| Boucle | Depuis le dernier onglet, suivant revient au premier. Désactivé, les flèches et le clavier s’arrêtent aux deux bouts. La flèche en bout de course prend alors son état Désactivé. En mode Manuelle ou Les deux. | Activé |
| Glisser sur écran tactile | Un glissé horizontal sur les panneaux ouvre l’onglet suivant ou précédent. En mode Manuelle ou Les deux. | Désactivé |
| Afficher un bouton de pause | Pose un bouton qui arrête la rotation. En mode Auto ou Les deux. | Activé |
| Durée de rotation aléatoire | Tire au sort l’intervalle entre deux onglets, entre un minimum et un maximum. En mode Auto ou Les deux. | Désactivé |
| Durée de rotation (ms) | Le temps d’affichage d’un onglet, de 500 à 10 000 ms. | 2 000 ms |
| Durée de rotation minimale (ms) et Durée de rotation maximale (ms) | Les bornes de l’intervalle tiré au sort, de 500 à 10 000 ms. Avec Durée de rotation aléatoire. | 2 000 ms et 3 000 ms |
Les couleurs, la typographie, la taille, les bordures et les animations se règlent comme sur tout bloc : voir Colorer un bloc, Mettre en forme un texte, Régler la taille, les bordures et les effets et Animer un bloc.
La rotation automatique
En mode Auto ou Les deux, les onglets reçoivent un bouton de pause. Un contenu qui bouge seul plus de cinq secondes doit pouvoir être arrêté. Un lecteur d’écran annonce ce bouton Mettre la rotation en pause.
Si vous désactivez Afficher un bouton de pause, le panneau affiche un avertissement : sans bouton, ces onglets échouent au critère WCAG 2.2.2 (niveau A). Le panneau Accessibilité de l’éditeur relève le même défaut.
Habiller les onglets
À l’insertion, chaque onglet reçoit le style enregistré Onglet et chaque panneau le style Panneau d’onglet. Avec le style de navigation Blocs de contenu, l’onglet ouvert porte un trait de 2 px sous son libellé et prend votre couleur principale. Les autres onglets portent le même trait, transparent, pour que le texte ne bouge pas au changement d’onglet.
Pour changer cette apparence, sélectionnez un onglet, choisissez l’état Actif dans l’onglet Styles et réglez sa couleur, sa bordure ou son fond. Mettez à jour le style Onglet pour que tous les onglets du site suivent (Enregistrer le style d’un bloc).
La partie Onglets du catalogue de design donne une allure à tous les onglets du site : Souligné, Pilules, Pilules teintées, Segmenté, Encadré ou Liseré (Adopter un design du catalogue). Pour écarter les onglets les uns des autres, appliquez à la bande d’onglets le style Espacé, un écart de 8 px (Espacer vos blocs).
L’apparition d’un panneau
Chaque panneau reçoit à sa création une animation Fondu d’entrée de 600 ms, déclenchée Quand il est activé et réglée sur Rejouer. Elle se joue chaque fois que le panneau s’ouvre. Vous la trouvez dans l’onglet Animations du panneau.
- Pour un autre effet, sélectionnez le panneau et remplacez le fondu dans l’onglet Animations. Chaque panneau peut avoir le sien.
- Pour une ouverture sans effet, supprimez l’animation : le panneau apparaît d’un coup.
- Avec Afficher les panneaux voisins, les panneaux n’ont pas ce fondu : il rendrait les voisins invisibles. Une animation que vous avez posée vous-même reste.
L’affichage du panneau ouvert et le masquage des autres sont gérés par le bloc. Sur un panneau, la case Masquer ce bloc de l’onglet Styles est grisée.
Les panneaux voisins
Avec Afficher les panneaux voisins, les onglets montrent une rangée : le panneau ouvert au milieu, un bout de ses deux voisins sur les bords.
- Un panneau occupe 80 % de la rangée tant que vous ne lui donnez pas une autre largeur.
- L’état Par défaut du panneau habille les voisins, son état Actif le panneau ouvert. Une opacité de 50 % à l’état Par défaut atténue les voisins.
- Avec Boucle, le dernier panneau a le premier pour voisin. Sans, le premier n’a pas de voisin à gauche ni le dernier à droite.
- Les voisins ne se lisent ni au clavier ni par un lecteur d’écran : on les atteint par les onglets.
Sur téléphone
Posée en haut ou en bas des panneaux, la bande d’onglets reste sur une seule rangée. Les libellés se resserrent d’abord, quitte à passer sur deux lignes. Quand il n’y a plus de place, la bande défile sur le côté. Les flèches restent aux deux bouts de la barre et l’onglet qu’elles ouvrent revient au centre.
- Pour des onglets sur plusieurs rangées, sélectionnez la bande d’onglets et activez Passage à la ligne dans sa mise en page, écran par écran.
- Les onglets défilent derrière les flèches : donnez un fond aux flèches dans leur style.
- Posée sur un côté, la barre est une colonne qui s’allonge vers le bas.
- Avec Glisser sur écran tactile, un glissé horizontal d’au moins 40 px sur les panneaux change d’onglet. Un glissé plus vertical qu’horizontal fait défiler la page.
Des onglets en accordéon sur téléphone
Pour afficher chaque onglet suivi de son panneau sur téléphone, dissolvez la bande et la zone des panneaux sur cet écran.
- Sélectionnez la Bande d’onglets. Dans son panneau Mise en page flex, choisissez l’écran Mobile puis activez Dissoudre sur cet écran.
- Sélectionnez les Panneaux des onglets. Dans leur panneau Dissoudre, activez Mobile.
- Sélectionnez le bloc Onglets. Son panneau Mise en page en grille liste les onglets et les panneaux. Donnez à chacun son ordre sur Mobile : onglet 1, panneau 1, onglet 2, panneau 2.
Sur cet écran, le panneau fermé sort de la page et le panneau ouvert apparaît sans fondu. Les flèches s’effacent. Au clavier et au lecteur d’écran, ce sont toujours des onglets.
Accessibilité
Le bloc suit le modèle d’onglets attendu par les technologies d’assistance. Vous n’avez rien à activer.
| Touche | Effet |
|---|---|
Tab | Entre dans la barre. Toute la barre compte pour un seul arrêt. |
← et → | Ouvre l’onglet précédent ou suivant et lui donne le focus. Sans Boucle, s’arrête aux deux bouts. |
Entrée ou Espace | Ouvre l’onglet qui a le focus. |
Tab depuis la barre | Va au panneau ouvert, puis à son contenu. |
Un lecteur d’écran annonce le rang de l’onglet et son état, relie chaque onglet à son panneau et ne lit pas les panneaux fermés. Les flèches de la barre restent cliquables à la souris mais sortent du parcours au clavier : ← et → font la même chose.
Une flèche qui contient plusieurs libellés empilés, un par onglet, doit masquer les autres avec Masquer ce bloc. Une opacité ne suffit pas : un lecteur d’écran lit tout le texte du bouton.
Un bloc avant ou après les onglets
La barre accepte un Conteneur avant la bande d’onglets et un autre après. Le bloc Onglets donne l’état Actif au premier quand le premier onglet est ouvert. Il le donne au second quand le dernier onglet l’est. Vous pouvez l’habiller dans cet état, le masquer à l’état Par défaut avec Masquer ce bloc ou l’animer Quand il est activé.
Par exemple, dans un récit en cinq onglets sans Boucle, un Conteneur après la bande porte un bouton masqué à l’état Par défaut. Sur la flèche suivante, cochez Masquer ce bloc à l’état Désactivé. Au dernier onglet, la flèche disparaît et le bouton prend sa place.