Carte

Conteneur d'information accueillant titre, contenu et actions en pied de carte. Entièrement cliquable (avec la sémantique clavier native de button), il prend en charge le squelette de chargement et la mise en page rapide sx.

Utilisation de base

Utilisation de base

Pluie sur les bananiers

Derrière la fenêtre, la pluie nocturne se devine ; les feuilles de bananier en sont les premières à retentir.

<script setup lang="ts">
</script>

<template>
  <LhCard title="Pluie sur les bananiers">
    Derrière la fenêtre, la pluie nocturne se devine ; les feuilles de bananier en sont les premières à retentir.
  </LhCard>
</template>

<script>
export default {}
</script>

<template>
  <LhCard title="Pluie sur les bananiers">
    Derrière la fenêtre, la pluie nocturne se devine ; les feuilles de bananier en sont les premières à retentir.
  </LhCard>
</template>

shadow contrôle le moment d'affichage de l'ombre : always (par défaut) / hover (au survol) / never.

Moment de l'ombre

Ombre au survol

L'ombre apparaît au survol.

Sans ombre

Aucune ombre, en toutes circonstances.

<script setup lang="ts">
</script>

<template>
  <LhCard shadow="hover" title="Ombre au survol">L'ombre apparaît au survol.</LhCard>
  <LhCard shadow="never" title="Sans ombre">Aucune ombre, en toutes circonstances.</LhCard>
</template>

<script>
export default {}
</script>

<template>
  <LhCard shadow="hover" title="Ombre au survol">L'ombre apparaît au survol.</LhCard>
  <LhCard shadow="never" title="Sans ombre">Aucune ombre, en toutes circonstances.</LhCard>
</template>

Slot d'en-tête et extra

En-tête personnalisé

En-tête personnaliséActions

Le slot header permet de reprendre entièrement la zone de titre.

<script setup lang="ts">
</script>

<template>
  <LhCard>
    <template #header><span>En-tête personnalisé</span></template>
    <template #extra>Actions</template>
    …
  </LhCard>
</template>

<script>
export default {}
</script>

<template>
  <LhCard>
    <template #header><span>En-tête personnalisé</span></template>
    <template #extra>Actions</template>
    …
  </LhCard>
</template>

Couverture et pied de carte

Couverture et pied de carte

Zone de couverture

Contenu principal……

<script setup lang="ts">
</script>

<template>
  <!-- Couverture et pied de carte -->
  <LhCard>
    <template #cover>…</template>
    …
    <template #footer>
      <LhButton size="small">Favoris</LhButton>
    </template>
  </LhCard>
</template>

<script>
export default {}
</script>

<template>
  <!-- Couverture et pied de carte -->
  <LhCard>
    <template #cover>…</template>
    …
    <template #footer>
      <LhButton size="small">Favoris</LhButton>
    </template>
  </LhCard>
</template>

Carte entièrement cliquable

Avec clickable, la carte entière assume la sémantique de button : focus par Tab (anneau de focus :focus-visible), Enter / Espace déclenche click.

Carte cliquable

Cliquez-moi

La carte entière est cliquable. Essayez de la mettre au focus avec Tab, puis appuyez sur Enter.

<script setup lang="ts">
function onCardClick() {
  console.log('card clicked')
}
</script>

<template>
  <!-- Carte cliquable -->
  <LhCard clickable title="Cliquez-moi" @click="onCardClick">…</LhCard>
</template>

<script>
export default {
  methods: {
    onCardClick() {
      console.log('card clicked')
    },
  },
}
</script>

<template>
  <!-- Carte cliquable -->
  <LhCard clickable title="Cliquez-moi" @click="onCardClick">…</LhCard>
</template>

État de chargement

État de chargement

Chargement…

<script setup lang="ts">
</script>

<template>
  <LhCard title="Chargement…" loading />
</template>

<script>
export default {}
</script>

<template>
  <LhCard title="Chargement…" loading />
</template>

Card API

Props

Propriété	Description	Type	Valeur par défaut
title	Titre de la carte (le slot header convient également)	string	—
shadow	Moment d'affichage de l'ombre	"always" | "hover" | "never"	'always'
clickable	Carte entièrement cliquable (assume la sémantique clavier de button)	boolean	false
loading	État de chargement : la zone de contenu est remplacée par un squelette	boolean	false
themeVars	Variables de thème au niveau du composant (préfixe --lh- ajouté automatiquement aux clés)	{ [x: string]: string; }	—
bgPattern	URL du motif d'arrière-plan (par exemple var(--lh-pattern-willow)), non soumise à la liste blanche globale	string	—
sx	Propriétés de mise en page rapide sx	LhSxProps	—

Events

Événement	Description	Paramètre
click	Clic sur une carte cliquable (déclenché par la souris ou par Enter/Espace au clavier)	(e: Event) => void

Variables de thème

Les variables CSS suivantes définissent leurs valeurs par défaut sur .lh-card et peuvent être surchargées globalement ou par composant via themeVars :

Variable	Description	Valeur par défaut
--lh-card-border-radius	Rayon des coins	border-radius-base + 2px
--lh-card-bg	Couleur d'arrière-plan	--lh-bg-color
--lh-card-border-color	Couleur de bordure	--lh-border-color-light
--lh-card-header-padding / --lh-card-body-padding / --lh-card-footer-padding	Marges internes des trois zones	14px 20px / 18px 20px / 12px 20px
--lh-card-shadow / --lh-card-shadow-hover	Ombre courante / ombre au survol	Double ombre douce aux tons d'encre chaude
--lh-card-loading-bg / --lh-card-loading-highlight	Couleur de fond du squelette / reflet fluide	--lh-border-color-light / mélange éclairci vers le ton papier

Slots

Slot	Description
header	Zone de titre personnalisée
extra	Contenu supplémentaire à droite de la zone de titre
cover	Couverture
default	Contenu principal
footer	Pied de carte

Accessibilité

• Carte cliquable : role="button" + tabindex="0" + activation Enter/Espace (pattern button des APG)
• État de chargement : conteneur aria-busy="true", les graphiques de squelette sont masqués aux lecteurs d'écran
• L'anneau de focus clavier passe par :focus-visible, masqué au clic souris

Définitions de types

Les structures de types TypeScript exportées par ce composant sont présentées ci-dessous (extraction automatique à partir des sources packages/components/card/src/types.ts et @lh-ui/share/core/* ; cliquez sur chaque entrée pour afficher la définition complète ; la description des propriétés se trouve dans le tableau Props ci-dessus) :

LhCardProps

export interface LhCardProps {
  /** Titre de la carte (le slot header convient également) */
  title?: string
  /** Moment d'affichage de l'ombre */
  shadow?: LhCardShadow
  /** Carte entièrement cliquable (assume la sémantique clavier de button) */
  clickable?: boolean
  /** État de chargement : la zone de contenu est remplacée par un squelette */
  loading?: boolean
  /** Variables de thème au niveau du composant (préfixe --lh- ajouté automatiquement aux clés) */
  themeVars?: Record<string, string>
  /** URL du motif d'arrière-plan (par exemple var(--lh-pattern-willow)), non soumise à la liste blanche globale */
  bgPattern?: string
  /** Propriétés de mise en page rapide sx */
  sx?: LhSxProps
}

LhCardShadow _{(provient de @lh-ui/share/core/card)}

/** Moment d'affichage de l'ombre de la carte */
export type LhCardShadow = 'always' | 'hover' | 'never'