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 string preset ('primary', 'success', 'danger', 'warning', 'info') para mostrar un icono predefinido con colores correspondientes.

Tipo de Icono

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

Color de Icono Personalizado

Usa la prop iconColor para sobreescribir el color del fondo y texto del icono de forma independiente al tipo de icono.

Icono Personalizado

Pasa un componente Vue a la prop icon para usar un icono personalizado.

<template>
  <SCard :icon="ShieldTickIcon" title="Asegurado">
    <template #description>Tu cuenta está protegida.</template>
  </SCard>
</template>

<script setup lang="ts">
import { ShieldTickIcon } from '@placetopay/iconsax-vue/outline';
</script>

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