Composant de liste flexible. Supporte les variantes bordées, borderless, inline, hover et colorées.
Les items peuvent être des textes simples ou des liens via .list-link.
Les couleurs de hover et d'état actif sont générées automatiquement depuis la map
$colors.
Quand un .list-item contient un enfant direct
.list-link, le padding du .list-item
est automatiquement retiré via :has(> .list-link) et
transféré sur le lien — ce qui permet au lien de couvrir toute la surface cliquable de l'item.
| CLASSE | ÉLÉMENT | DESCRIPTION |
|---|---|---|
.list |
<ul> <ol> |
Classe de base. Retire le style de liste natif, applique bordure et border-radius via variables CSS. Requise sur toutes les
listes.
|
.list-item |
<li> |
Item de liste avec padding via variables CSS. Si contient un .list-link direct, le padding est retiré et transféré
sur le lien.
|
.list-link |
<a> |
Lien en display: block pleine largeur. Prend le
padding du .list-item parent pour couvrir toute la
zone cliquable. Focus stylisé via box-shadow inset.
|
.list-bordered |
<ul> |
Ajoute une bordure inférieure entre chaque item. Le dernier item n'a pas de bordure. |
.list-borderless |
<ul> |
Retire toutes les bordures de la liste et de ses items. |
.list-inline |
<ul> |
Affiche les items en ligne via inline-flex avec un
espacement via --list-inline-gap.
|
.list-unstyled |
<ul> |
Retire uniquement le list-style natif. Aucun style
supplémentaire.
|
.list-hover |
<ul> |
Active les styles hover et active sur tous les .list-item enfants sauf ceux avec .no-action.
|
.list-item-hover |
<li> |
Active le style hover uniquement sur cet item spécifique, sans .list-hover sur la liste.
|
.list-{color} |
<ul> |
Variante colorée générée depuis $colors. Applique la
couleur sur le texte, les bordures et les états hover/active de la liste.
|
.list-item-{color} |
<li> |
Applique une couleur sur un item individuel. Les états hover/active colorés sont activés si la liste
a .list-hover ou si l'item a .list-item-hover.
|
.no-action |
<li> |
Désactive les interactions hover et active sur un item spécifique, même si la liste a .list-hover.
|
.active |
<li> |
Force l'état actif visuellement sur un item. À combiner avec .list-item-hover ou sur un item d'une liste .list-hover.
|
Séparateurs entre les items via .list-bordered.
Couleur appliquée sur le texte, les bordures et les états hover via .list-{color}.
Couleur par item via .list-item-{color}. Les hover colorés
sont activés si la liste a .list-hover.
Items en ligne via .list-inline.
Via .list-item-hover sur l'item et .active pour forcer l'état actif.
Désactive hover et active sur un item spécifique via .no-action, même si la liste a .list-hover.
Les modificateurs de taille s'appliquent directement sur la liste et ajustent le padding de tous les items.
.list-sm.list (défaut).list-md.list-lg| ÉTAT | SÉLECTEUR | DESCRIPTION |
|---|---|---|
| Hover | .list-hover .list-item:hover |
Fond semi-transparent via --list-item-hover-background-color + box-shadow inset coloré à gauche.
|
| Actif | :active / .active |
Fond plus opaque via --list-item-active-background-color. La classe .active permet de forcer l'état visuellement.
|
| Focus | .list-link:focus-visible |
box-shadow inset semi-transparent. Sur une liste
colorée, la couleur du focus correspond à la couleur de la liste.
|
| Désactivé | .no-action |
Exclut l'item des interactions hover et active même si la liste a .list-hover.
|
| TOKEN | RÔLE |
|---|---|
--list-border-radius |
Rayon des coins de la liste |
--list-border-style |
Style de bordure |
--list-border-color |
Couleur de bordure par défaut |
--list-border-width |
Épaisseur de bordure |
--list-item-padding-x |
Padding horizontal des items — taille défaut |
--list-item-padding-y |
Padding vertical des items — taille défaut |
--list-item-padding-x-sm / -md / -lg |
Padding horizontal des items selon modificateur de taille |
--list-item-padding-y-sm / -md / -lg |
Padding vertical des items selon modificateur de taille |
--list-item-hover-background-color |
Couleur de fond au hover (défini par thème) |
--list-item-active-background-color |
Couleur de fond à l'état actif (défini par thème) |
--list-item-border-width-inside-hover |
Largeur du box-shadow inset coloré à gauche au hover
|
--list-item-shadow-inset-reduce
|
Réduction du box-shadow inset sur les axes vertical
et horizontal
|
--list-inline-gap |
Espacement entre les items en mode .list-inline |
| PRATIQUE | DÉTAIL |
|---|---|
Élément <ul> / <ol> |
Utilisez toujours un élément de liste natif — le rôle list est communiqué nativement aux lecteurs d'écran.
|
| Focus visible | Le focus sur .list-link est stylisé via box-shadow inset semi-transparent. Visible uniquement à
la navigation clavier via :focus-visible.
|
.list-link |
Le lien couvre toute la surface du .list-item via
display: block; width: 100% — la zone cliquable est
maximale.
|
.active |
La classe .active est visuelle uniquement — pensez à
ajouter aria-current="page" ou aria-selected="true" pour communiquer l'état aux
lecteurs d'écran.
|
Sur Safari, list-style: none retire le rôle
list de VoiceOver. Si l'accessibilité est critique,
ajoutez role="list" sur le <ul>
pour le conserver explicitement.
Quand un item contient un lien, toujours utiliser .list-link
sur le <a> et non du padding sur le <li> —
le CSS retire automatiquement le padding de l'item et le transfère sur le lien via :has(> .list-link).
Combiner .list-hover sur la liste avec
.list-{color} pour activer les hover colorés sur tous les items.
Pour un hover coloré sur un item individuel, combiner .list-item-hover
avec .list-item-{color}.
Ne pas ajouter de margin ou padding
directement sur un .list-item qui contient un
.list-link — le CSS le retire automatiquement et
le transfère sur le lien. Un padding manuel casserait ce comportement.
Les classes .list-{color} et .list-item-{color}
sont générées automatiquement via des boucles SCSS @each
sur la map $colors. Pour ajouter une nouvelle couleur,
il suffit d'ajouter une entrée dans la map.
List · WEBDEV-UI DOCS / V1