Contrôle segmenté vertical
Des options empilées pour les barres latérales sur ordinateur, avec un indicateur qui glisse vers le haut ou le bas.
Réglages
Code
<div class="uv-fsv"><span class="p"></span><button class="on">Aperçu</button><button>Design</button><button>Code</button><button>Réglages</button></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Filtres
Où l’utiliser
Pensez à la page de réglages d’une application web : Vue d’ensemble, Facturation, Équipe et Notifications empilés à gauche, le contenu qui change à droite. Le bloc qui glisse montre où l’on se trouve, sans menu encombrant. Il convient aussi aux rubriques d’une documentation ou à l’espace client d’une petite boutique. On parle aussi d’onglets verticaux en CSS.
Limitez-vous à cinq ou six entrées et fixez une largeur, pour que l’indicateur ne saute pas quand les libellés n’ont pas la même longueur. Sur mobile, une liste verticale prend beaucoup de place : préférez-y des chips horizontaux ou un menu déroulant.