Carte

Conteneur de carte générique.

Utilisation de base

Utilisation de base

Paysage à l'encre

Montagnes lointaines comme de l'indigo, eaux proches voilées de brume.

Ceci est la zone de corps de la carte.

Carte interactive

Lorsqu'elle est clickable, toute la carte porte la sémantique d'un button et supporte l'activation clavier Entrée / Espace.

import { LhCard } from '@lh-ui/react'

export default function Demo() {
  return (
    <LhCard title="Paysage à l'encre" style={{ width: 300 }}>
      <p>Les montagnes lointaines semblent bleu sombre, les eaux proches se voilent de brume.</p>
    </LhCard>
  )
}

Card Props

Prop	Description	Type	Options	Valeur par défaut
title	Titre (l'en-tête par défaut est rendu en l'absence de header)	string	—	—
shadow	Moment d'affichage de l'ombre	'always' | 'hover' | 'never'	—	'always'
clickable	Carte entière cliquable (assume la sémantique clavier d'un bouton)	boolean	—	false
loading	En chargement (squelette dans la zone de contenu, interactions de la carte entière bloquées)	boolean	—	false
cover	Zone de couverture	ReactNode	—	—
header	Contenu de l'en-tête (remplace l'en-tête par défaut)	ReactNode	—	—
extra	Zone supplémentaire à droite de l'en-tête	ReactNode	—	—
footer	Zone inférieure	ReactNode	—	—
themeVars	Variables de thème au niveau du composant, primant sur la configuration de ConfigProvider	Record<string, string>	—	—
bgPattern	Motif de fond au niveau du composant	string	—	—
sx	Raccourci de mise en page	SxProps	—	—

Événements de Card

Événement	Description	Signature du rappel	Équivalent Vue
onClick	Déclenché au clic (uniquement lorsque clickable est activé et loading non)	(event: MouseEvent) => void	@click

Interaction clavier

Lorsque clickable est activé et loading non, la carte est rendue avec role="button" et réagit à Entrée / Espace (Espace déclenche preventDefault pour éviter le défilement), voir Accessibilité.

Correspondance avec les slots Vue

Les slots cover / header / extra / footer de plus sont mappés côté React en props ReactNode de même nom ; le slot par défaut correspond à children.

Styles

import '@lh-ui/react/style/card'