Stats
UITarjeta de estadística con valor numérico animado, indicador de tendencia e icono.
Uso básico
Total Users
12450
<x-kore::stats label="Total Users" :value="12450" icon="users" /><x-kore::stats label="Total Users" :value="12450" icon="users" />Con tendencia
Tendencia automática basada en previousValue o forzada manualmente.
Users
1250
25%
Score
85
Errores
12
{{-- Tendencia automática --}}
<x-kore::stats label="Users" :value="1250" :previousValue="1000" icon="users" />
{{-- Tendencia forzada --}}
<x-kore::stats label="Score" :value="85" trend="up" icon="star" />
<x-kore::stats label="Errores" :value="12" trend="down" icon="bug" color="destructive" />{{-- Tendencia automática --}}
<x-kore::stats label="Users" :value="1250" :previousValue="1000" icon="users" />
{{-- Tendencia forzada --}}
<x-kore::stats label="Score" :value="85" trend="up" icon="star" />
<x-kore::stats label="Errores" :value="12" trend="down" icon="bug" color="destructive" />Colores
Color del icono con colores semánticos.
Ventas
3420
Ingresos
89500
Alertas
7
<x-kore::stats label="Ventas" :value="3420" icon="shopping-cart" color="primary" />
<x-kore::stats label="Ingresos" :value="89500" icon="dollar-sign" color="success" />
<x-kore::stats label="Alertas" :value="7" icon="alert-triangle" color="warning" /><x-kore::stats label="Ventas" :value="3420" icon="shopping-cart" color="primary" />
<x-kore::stats label="Ingresos" :value="89500" icon="dollar-sign" color="success" />
<x-kore::stats label="Alertas" :value="7" icon="alert-triangle" color="warning" />Variante compact
Layout condensado con icono, label y valor en una sola fila.
Users
2450
Revenue
15600
<x-kore::stats label="Users" :value="2450" icon="users" variant="compact" />
<x-kore::stats label="Revenue" :value="15600" icon="dollar-sign" variant="compact" color="success" /><x-kore::stats label="Users" :value="2450" icon="users" variant="compact" />
<x-kore::stats label="Revenue" :value="15600" icon="dollar-sign" variant="compact" color="success" />Como enlace
Renderiza como enlace con efecto hover.
<x-kore::stats label="View Reports" :value="156" icon="bar-chart-3" href="#" /><x-kore::stats label="View Reports" :value="156" icon="bar-chart-3" href="#" />Sin animación
Desactiva la animación de conteo.
Total
9999
<x-kore::stats label="Total" :value="9999" :animated="false" icon="hash" /><x-kore::stats label="Total" :value="9999" :animated="false" icon="hash" />Props
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
label
|
string|null | null | Etiqueta descriptiva |
value
|
int|float | null | Valor numérico |
previousValue
|
int|float|null | null | Valor anterior para calcular tendencia |
icon
|
string|null | null | Icono Lucide |
href
|
string|null | null | URL (convierte en enlace) |
trend
|
string | auto | Tendencia: auto, up, down, none |
animated
|
bool | true | Animación de conteo al entrar al viewport |
variant
|
string | default | Variante: default, compact |
color
|
string | primary | Color del icono: primary, success, warning, destructive, info |
Configuración
Puedes personalizar los defaults en config/kore-ui.php.
config/kore-ui.php
// config/kore-ui.php
'stats' => [
'variant' => 'default',
'animated' => true,
],// config/kore-ui.php
'stats' => [
'variant' => 'default',
'animated' => true,
],