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.
Cargando 
<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>
'collapsible', 'type' => 'bool', 'default' => 'false', 'description' => 'Permite colapsar el contenido'], ['name' => 'collapsed', 'type' => 'bool', 'default' => 'false', 'description' => 'Estado inicial colapsado'], ['name' => 'loading', 'type' => 'bool', 'default' => 'false', 'description' => 'Overlay de loading'], ['name' => 'skeleton', 'type' => 'bool|int', 'default' => 'false', 'description' => 'Silueta mientras no hay datos; el entero elige las líneas del cuerpo. Ver skeleton'], ['name' => 'bordered', 'type' => 'bool', 'default' => 'true', 'description' => 'Borde visible'], ['name' => 'shadow', 'type' => 'bool', 'default' => 'true', 'description' => 'Sombra'], ['name' => 'padding', 'type' => 'bool', 'default' => 'true', 'description' => 'Padding interno'], ]" />
Cargando