Tarjeta
Contenedor de tarjetas de uso general.
Uso básico
Uso básico
Paisaje con tinta
Montañas lejanas como índigo, aguas cercanas veladas en niebla.
Esta es el área de contenido de la tarjeta.
Tarjeta interactiva
Cuando es clickable, toda la tarjeta adquiere la semántica de un button y admite la activación con Enter / Space.
import { LhCard } from '@lh-ui/react'
export default function Demo() {
return (
<LhCard title="Paisaje con tinta china" style={{ width: 300 }}>
<p>Montañas lejanas como tinta, aguas cercanas entre la bruma.</p>
</LhCard>
)
}
Card Props
| Prop | Descripción | Tipo | Valores permitidos | Predeterminado |
|---|---|---|---|---|
| title | Título (si no hay header, renderiza la cabecera por defecto) | string | — | — |
| shadow | Cuándo se muestra la sombra | 'always' | 'hover' | 'never' | — | 'always' |
| clickable | Toda la tarjeta es cliclable (asume la semántica de teclado de button) | boolean | — | false |
| loading | Carga (placeholder de esqueleto en el área de contenido; la tarjeta entera bloquea la interacción) | boolean | — | false |
| cover | Área de portada | ReactNode | — | — |
| header | Contenido de la cabecera (sustituye a la cabecera por defecto) | ReactNode | — | — |
| extra | Área adicional a la derecha de la cabecera | ReactNode | — | — |
| footer | Área inferior | ReactNode | — | — |
| themeVars | Variables de tema a nivel de componente; sustituye la configuración de ConfigProvider | Record<string, string> | — | — |
| bgPattern | Patrón de fondo a nivel de componente | string | — | — |
| sx | Props rápidas de layout | SxProps | — | — |
Eventos de Card
| Evento | Descripción | Firma del callback | Equivalente en Vue |
|---|---|---|---|
| onClick | Se dispara al hacer clic (solo si clickable y no loading) | (event: MouseEvent) => void | @click |
Interacción de teclado
Cuando clickable y no loading, la tarjeta se renderiza como role="button" y responde a Enter / Space (Space ejecuta preventDefault para evitar el desplazamiento); consulta Accesibilidad.
Equivalencia de slots de Vue
Los slots cover / header / extra / footer de plus se corresponden en React con props ReactNode del mismo nombre; el slot por defecto pasa a ser children.
Estilos
import '@lh-ui/react/style/card'