Carte

Conteneur d'agrégation d'informations. Structure en trois zones — titre, contenu, actions — avec prise en charge du squelette de l'état de chargement et de l'ombre au survol.

Carte

<template>
  <div class="demo-row" style="align-items: flex-start">
    <LhCard title="Voyageurs parmi les montagnes et les rivières" style="width: 240px">
      <p class="demo-note">Fan Kuan, dynastie Song du Nord. Rochers peints au lavis en gouttes de pluie, d'une allure majestueuse.</p>
      <template #actions>
        <LhButton size="small">Analyser</LhButton>
        <LhButton size="small" type="primary">Favoris</LhButton>
      </template>
    </LhCard>
    <LhCard title="État de chargement" loading style="width: 240px">
      <p class="demo-note">La zone de contenu est remplacée par un squelette.</p>
    </LhCard>
    <LhCard title="Carte cliquable" clickable shadow="hover" style="width: 240px">
      <p class="demo-note">shadow=hover soulève la carte au survol, clickable porte la sémantique d'un bouton.</p>
    </LhCard>
    <LhCard style="width: 240px">
      <template #header>
        <span style="font-weight: 600">Titre du slot header</span>
      </template>
      <p class="demo-note">Choisir entre la prop title et le slot header.</p>
    </LhCard>
  </div>
</template>

Props

Prop	Description	Type	Valeur par défaut
title	Titre (le slot header est également disponible)	string	''
shadow	Moment d'affichage de l'ombre	'always' \| 'hover' \| 'never'	'always'
clickable	Carte entière cliquable (porte la sémantique clavier d'un bouton)	boolean	false
loading	État de chargement : la zone de contenu est remplacée par un squelette	boolean	false
themeVars / bgPattern / sx	Remplacement du thème	—	—

Slots

Slot	Description
header	Zone de titre (alternative à la prop title)
default	Zone de contenu
actions	Zone d'actions (en bas)