Aller à la liste des composantsAller au menu de la page
Personnalisation avancée
En plus de CSS part propres à chacun, les composants Ariane exposent des CSS part qui ont un rôle sémantique et transverse.
Un même élément expose souvent plusieurs CSS part complémentaires, par exemple control (sémantique) et link (spécifique).
Ces ::part() sémantiques facilitent la personnalisation des éléments communs à chacun des composants, permettant une meilleure intégration à un Design System par exemple.
| Part sémantique | Signification | Exemples |
|---|---|---|
(nom du composant) | Racine du composant. | ar-charcounter::part(charcounter), ar-datepicker::part(datepicker), ar-breadcrumb::part(breadcrumb) |
panel | Conteneur flottant secondaire (datepicker, dropdown...). | ar-datepicker::part(panel) |
trigger | Ouvre/ferme un panel ou une zone repliable. | ar-datepicker::part(trigger) |
header / footer | En-tête / pied de composant. | ar-datepicker::part(header) |
body | Zone de contenu principal. | ar-dialog::part(body), ar-alert::part(body) |
control | Élément interactif générique (hors field/action-button/trigger). | ar-pagination::part(link), ar-datepicker::part(day) |
field | Élément qui reçoit une saisie. Deux sous-rôles standard, réutilisables par tout futur composant : input (champ texte/textarea) et select (liste déroulante). | ar-datepicker::part(input), ar-pagination::part(select) |
action-button | Bouton qui déclenche une action ponctuelle (pas un toggle de panel). | ar-pagination::part(prev), ar-datepicker::part(today-button) |
indicator | Marqueur/indicateur visuel. | ar-table-sort::part(indicator) |
label | Texte descriptif. | ar-datepicker::part(label) |
icon | Icône. | ar-alert::part(icon) |
Certains ::part() portent en plus un modificateur d'état, selon la convention <élément>--<état> : l'élément de base reste présent, l'état s'ajoute en second part sur le même attribut (ex. part="indicator indicator--current").
Ces parts d'état permettent une customisation avancée des composants dans leur différents états.
| État | Signification | Exemples |
|---|---|---|
--current | Position atteinte par navigation. | ar-pagination::part(item--current) |
--selected | Choix actif de l'utilisateur. | ar-tab::part(tab--selected) |
--disabled | Désactivé. | ar-pagination::part(nav-button--disabled) |
--warning | État d'avertissement. | ar-charcounter::part(count--warning) |
--error | État d'erreur. | ar-charcounter::part(count--error) |
--desktop | Affichage desktop d'un élément ayant une variante mobile. | ar-breadcrumb::part(list--desktop) |
--mobile | Affichage mobile d'un élément ayant une variante desktop. | ar-breadcrumb::part(list--mobile) |
--substep | Sous-liste d'étape imbriquée dans une liste d'étape parente. | ar-stepper-item::part(list--substep) |