Tu espacio de trabajo
Una card controlada por props, con contenido reactivo.
Cambios guardados: 0
Outline
Borde definido para separar contenido.
Detalles del proyecto y contenido relacionado.
Soft
Un fondo tenue, sin borde visible.
Información complementaria dentro de una vista.
Solid
El color de acento para destacar contenido.
Un mensaje relevante para el equipo.
Elevated
Una superficie elevada mediante sombra.
Contenido que necesita distinguirse del fondo.
Cabecera personalizada
Los snippets conservan el contenido y las acciones de tu aplicación.
También puedes utilizar sólo el cuerpo, sin cabecera ni pie.
Uso y snippets
<script lang="ts">
const count = signal(0)
</script>
<template>
<UICard title="Tu espacio de trabajo" variant="outline">
<p role="status">Cambios guardados: {count.value}</p>
<snippet name="footer">
<UIButton on:click="() => count.value++">Guardar cambio</UIButton>
</snippet>
</UICard>
</template>
La cabecera puede venir de
title
y
description
o del snippet
header, que tiene prioridad.
default
contiene el cuerpo y
footer
las acciones.
| Nombre | Tipo / valor inicial | Descripción |
|---|---|---|
title / description
|
string
| Texto opcional de la cabecera. |
variant
|
outline | soft | solid | elevated
outline
| Variante visual; admite ui.defaults.card. |
class
|
string
| Clases adicionales. |
El snippet
default
es obligatorio.
header
y
footer
son opcionales. El componente usa una sección con nombre accesible cuando se especifica un título.