Contrôle segmenté façon iOS
Un contrôle segmenté à la manière d’Apple : l’indicateur blanc s’étire légèrement en glissant d’une option à l’autre.
Réglages
Code
<div class="uv-fsi"><span class="p"></span><button class="on">Jour</button><button>Semaine</button><button>Mois</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
Le sélecteur Jour, Semaine, Mois que tout le monde connaît. Il a sa place sur l’écran de statistiques d’une appli de sport, sur le graphique d’un tableau de bord commercial ou dans un agenda qui change de vue. Vos visiteurs le connaissent déjà par leur téléphone. Si vous cherchiez un segmented control iOS en HTML et CSS, le voici.
Deux à quatre options, c’est l’idéal. Au-delà, les segments rétrécissent et les libellés se tassent. Il est le plus à l’aise sur des panneaux gris clair ; sur un thème sombre, atténuez l’ombre de l’indicateur.