Skip to main content
View as Markdown

Composants spécialisés

Les composants spécialisés servent des cas d'usage ciblés : assistants multi-étapes, listes à réordonner par glissement, changement de langue, points de statut et entrées avancées autonomes. Plusieurs sont référencés depuis d'autres pages de catégorie (contrôles de formulaire, social) où ils remplissent plus d'un rôle. Tous acceptent l'ensemble partagé props ainsi que les modules visibility et responsive.

components:
  - type: wizard
    steps:
      - { id: account, label: Account, description: 'Set up your account' }
      - { id: profile, label: Profile }
    children:
      - { type: input, name: email }
      - { type: input, name: name }

wizard

Un flux multi-pages par étapes avec un indicateur de progression.

Propriété Description
steps Définitions d'étapes (voir ci-dessous).
initialStep L'id de l'étape affichée en premier.
children Les composants rendus par étape.

Chaque étape :

Propriété d'étape Description
id Identifiant d'étape unique (utilisé pour la navigation et initialStep).
label Texte d'affichage dans l'indicateur de progression.
icon Nom d'icône Lucide dans l'indicateur d'étape.
description Brève description sous le libellé de l'étape.

reorderable-list

Une liste dont les éléments peuvent être réordonnés par glisser-déposer ou clavier. (Aussi documenté dans Interactivité et scripts.)

Propriété Description
dragHandle Activer le réordonnancement par glisser-déposer des éléments de la liste.
onReorder Action déclenchée lorsque les éléments sont réordonnés.
children Les éléments de la liste (chacun avec une poignée de glissement).

language-switcher

Un contrôle qui change la langue active pour une application internationalisée.

Propriété Description
props Attributs HTML et options d'affichage (p. ex. className, style de libellé).

Voir Langues pour la configuration i18n.

status-indicator

Un point de statut coloré avec un libellé (aussi exprimable comme badge avec variant: status).

Propriété Description
label Texte du libellé de statut à côté du point.
color Couleur du point (valeur de couleur CSS ou nom de jeton de thème).
pulse Activer une animation pulsante sur le point.

file-upload

Un sélecteur de fichiers avec glisser-déposer optionnel. (Aussi documenté dans Contrôles de formulaire.)

Propriété Description
accept Types MIME/extensions acceptés (p. ex. image/*, .pdf).
dropZone Activer une zone de dépôt par glisser-déposer.
maxFiles Nombre maximal de fichiers par téléversement.
maxFileSize Taille maximale de fichier en octets (p. ex. 10485760 pour 10 Mo).

number-input

Une saisie numérique avec boutons d'incrémentation. (Aussi documenté dans Contrôles de formulaire.)

Propriété Description
min Valeur minimale.
max Valeur maximale.
step Incrément de pas.
showStepper Afficher les boutons d'incrémentation/décrémentation (défaut : true).
defaultValue Valeur numérique initiale.

time-picker

Une saisie d'heure. (Aussi documenté dans Contrôles de formulaire.)

Propriété Description
minTime Heure sélectionnable minimale (HH:mm).
maxTime Heure sélectionnable maximale (HH:mm).
stepMinutes Incrément en minutes pour la sélection (défaut : 15).

comments / ai-chat

Composants d'engagement documentés dans Composants sociaux : comments (commentaires en fil de discussion, publics/invités), commentCount et ai-chat (un panneau de chat avec agent IA).

Pages connexes