OperationList
Une opération dans une liste : vignette, intitulé, montant, date, état, contexte. La rangée entière est cliquable et mène à la fiche de l'opération. OperationIcon est la vignette par défaut, quand l'opération n'a pas de logo.
Utilisation
import { OperationList, OperationIcon } from "@monstera/ui"Rangées
Tout est facultatif sauf l'intitulé : la même rangée sert à la liste dense d'un écran, avec le contexte sous la date, et à l'aperçu d'une feuille, sans lui. ListContainer empile les rangées.
Taille lg
size lg donne la version web de la rangée : intitulé en 20 px, montant en 18, date et contexte en 14. Le Badge d'état se prend alors en md.
Le montant guide l'œil
L'intitulé se tronque plutôt que de pousser le montant hors de la rangée : c'est le montant qu'on parcourt du regard dans une liste. Le signe fait partie de la chaîne (- 900,00 €), le composant ne l'ajoute pas.
Une vignette, deux origines
avatar reçoit soit le logo de la marque, soit un OperationIcon, la pastille ronde de 40 px à fond neutre qui accueille un glyphe de 24 px. Le composant ne rend qu'une icône : c'est l'appelant qui choisit le glyphe, banque ou carte.
Lu d'un seul tenant
La rangée est un bouton dont le contenu énonce intitulé, montant, date puis contexte ; le chevron est décoratif.
Accessibilité
Posées dans un ListContainer, les rangées forment une liste : un lecteur d'écran annonce le nombre d'éléments, puis la position de chacun. Chaque rangée est enveloppée dans un élément de liste sans boîte (display: contents), la mise en page ne bouge pas. Des rangées posées hors d'un ListContainer ne sont pas annoncées comme une liste.
Le titre d'une opération passe à la ligne quand il ne tient pas, plutôt que d'être tronqué ; le montant, lui, reste sur une ligne.
API
OperationList
Prop
Type
OperationIcon
Prop
Type