Uso

El componente SCard proporciona un contenedor flexible para contenido. Soporta títulos, descripciones, iconos, botones de acción y estado de cierre.

Tamaños

Usa la prop size para cambiar el padding y el borde redondeado de la tarjeta.

Con Título y Descripción

Usa la prop title o el slot title, y el slot description para texto adicional.

Con Icono

Usa la prop icon con un preset de estado ('success', 'danger', 'warning', 'info') para mostrar un glifo predefinido con su paleta de color correspondiente. Para visuales no asociados a un estado, pasa un componente Vue personalizado a icon y usa iconColor para definir la paleta — 'primary' y 'secondary' son presets solo de color y viven en iconColor, no en icon.

Tipo de Icono

Usa la prop iconType para alternar entre los estilos 'solid' (por defecto) y 'ping'.

Estilo Ping

El tipo de icono 'ping' renderiza el glifo dentro de un halo suave de anillos concentricos, util para notificaciones de estado, actualizaciones del sistema o cualquier tarjeta que deba captar atencion sin ser invasiva. La cantidad de anillos se adapta al size de la tarjeta (md: 4 anillos, sm: 3 anillos) y el alpha de cada anillo se desvanece de adentro (mas visible) hacia afuera (casi invisible).

Variantes

Las seis paletas de color estan disponibles con ping. Los cuatro presets de estado (success, danger, warning, info) se pasan directamente a icon. Los colores primary y secondary se aplican via iconColor combinado con un glifo personalizado.

Color de Icono Personalizado

Usa la prop iconColor para sobreescribir el fondo, color del glifo y la paleta de los anillos ping de forma independiente al icon elegido. iconColor acepta los seis colores del design system ('primary', 'secondary', 'success', 'danger', 'warning', 'info') y es la unica forma de aplicar 'primary' o 'secondary' al icono de una tarjeta — esos son colores, no glifos, por lo que no son valores validos para icon en si.

Icono Personalizado

Pasa cualquier componente Vue a la prop icon para usar un glifo personalizado. Combinalo con iconColor para aplicar cualquiera de los seis presets de color — incluyendo 'primary' y 'secondary', que no son valores validos para icon.

Cerrable

Establece closable en true para mostrar un botón de cierre. El componente emite un evento close al hacer clic.

Slot de Acciones

Usa el slot actions para agregar botones de acción personalizados en la parte inferior de la tarjeta.

<template>
  <SCard icon="success" title="Invitación Enviada">
    <template #description>La invitación ha sido enviada al usuario.</template>
    <template #actions>
      <SButton variant="primary">Aceptar</SButton>
      <SButton variant="secondary">Rechazar</SButton>
    </template>
  </SCard>
</template>

Prop de Acciones

Usa la prop actions para renderizar botones de acción con iconos en una sección de pie dividida.

<template>
  <SCard
    title="Acciones Rápidas"
    :actions="[
      { icon: PencilIcon, text: 'Editar', onClick: () => console.log('Editar') },
      { icon: TrashIcon, text: 'Eliminar', onClick: () => console.log('Eliminar') },
    ]"
  >
    <template #description>Elige una acción abajo.</template>
  </SCard>
</template>

<script setup lang="ts">
import { PencilIcon, TrashIcon } from '@heroicons/vue/24/outline';
</script>

Props

Eventos

Slots