K
KoreUI

Card

UI

Contenedor versátil con header, body, footer, imágenes, modo colapsable y estado de loading.

Uso básico

Mi Card

Descripción breve

Contenido de la card. 
<x-kore::card title="Mi Card" subtitle="Descripción breve">
    Contenido de la card.
</x-kore::card>
<x-kore::card title="Mi Card" subtitle="Descripción breve">
    Contenido de la card.
</x-kore::card>

Con acción

Slot de acción en la esquina derecha del header.

Usuarios

Lista de usuarios... 
<x-kore::card title="Usuarios">
    <x-slot:action>
        <x-kore::button label="Agregar" size="sm" icon="plus" />
    </x-slot:action>
    Lista de usuarios...
</x-kore::card>
<x-kore::card title="Usuarios">
    <x-slot:action>
        <x-kore::button label="Agregar" size="sm" icon="plus" />
    </x-slot:action>
    Lista de usuarios...
</x-kore::card>

Con imagen

Imagen en la parte superior, inferior o lateral.

Con imagen

Descripción de la imagen. 
<x-kore::card image="https://picsum.photos/400/200" title="Con imagen">
    Descripción de la imagen.
</x-kore::card>
<x-kore::card image="https://picsum.photos/400/200" title="Con imagen">
    Descripción de la imagen.
</x-kore::card>

Collapsible

Permite colapsar/expandir el contenido con animación.

Contenido colapsable con animación CSS grid.
Este contenido inicia oculto. 
<x-kore::card title="Sección colapsable" collapsible>
    Contenido colapsable con animación CSS grid.
</x-kore::card>

<x-kore::card title="Colapsado por defecto" collapsible collapsed>
    Este contenido inicia oculto.
</x-kore::card>
<x-kore::card title="Sección colapsable" collapsible>
    Contenido colapsable con animación CSS grid.
</x-kore::card>

<x-kore::card title="Colapsado por defecto" collapsible collapsed>
    Este contenido inicia oculto.
</x-kore::card>

Loading

Overlay de loading sobre el contenido de la card.

Cargando...

Este contenido tiene un overlay de loading. 
<x-kore::card title="Cargando..." :loading="true">
    Este contenido tiene un overlay de loading.
</x-kore::card>
<x-kore::card title="Cargando..." :loading="true">
    Este contenido tiene un overlay de loading.
</x-kore::card>

Sin padding

Desactiva el padding interno para contenido a sangre.

Sin padding

Contenido personalizado sin padding de la card.
<x-kore::card title="Sin padding" :padding="false">
    <div class="p-4 bg-kore-muted/10">Contenido personalizado sin padding de la card.</div>
</x-kore::card>
<x-kore::card title="Sin padding" :padding="false">
    <div class="p-4 bg-kore-muted/10">Contenido personalizado sin padding de la card.</div>
</x-kore::card>

Props

Prop Tipo Default Descripción
title string|null null Título
subtitle string|null null Subtítulo
image string|null null URL de imagen
imagePosition string top Posición de imagen: top, bottom, left
href string|null null URL — renderiza como enlace
collapsible bool false Permite colapsar el contenido
collapsed bool false Estado inicial colapsado
loading bool false Overlay de loading
bordered bool true Borde visible
shadow bool true Sombra
padding bool true Padding interno