OperationDetails
La carte des informations d'une fiche opération. Elle empile des OperationDetailsItem et pose elle-même le filet entre eux.
Utilisation
import { OperationDetails, OperationDetailsItem } from "@monstera/ui"Lignes d'information
Aucun séparateur à intercaler : le filet est posé entre les enfants, donc une ligne devenue conditionnelle ne laisse jamais un filet en trop ni en moins.
Vignette et ligne cliquable
Une vignette ou un lien sortent la valeur de son simple alignement à droite et lui donnent sa propre rangée. href rend la ligne cliquable et affiche le chevron, onClick seul fait la même chose avec un bouton.
Accessibilité
La fiche est une liste : un lecteur d'écran annonce le nombre de lignes, puis lit chaque couple libellé et valeur d'un seul tenant (« Opération, Prélèvement »). Une ligne qui agit (href ou onClick) est un lien ou un bouton, nommé par son libellé et sa valeur. Les filets entre les lignes sont décoratifs.
API
OperationDetails
Prop
Type
OperationDetailsItem
Prop
Type
InfoCard
La coque des cartes métier. Elle empile et rogne, le contenu vient de InfoCardBanner, InfoCardHeader, InfoCardAmount, InfoCardSection et InfoCardFooter, dans l'ordre qu'on choisit.
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.