K
KoreUI

Timeline

UI

Lista cronológica de eventos con marcadores, iconos y contenido personalizable.

Uso básico

  1. Pedido realizado

    15 de marzo, 2024

    Tu pedido ha sido realizado exitosamente.

  2. Enviado

    16 de marzo, 2024

    Tu paquete está en camino.
<x-kore::timeline>
    <x-kore::timeline.item label="Pedido realizado" timestamp="15 de marzo, 2024">
        Tu pedido ha sido realizado exitosamente.
    </x-kore::timeline.item>
    <x-kore::timeline.item label="Enviado" timestamp="16 de marzo, 2024">
        Tu paquete está en camino.
    </x-kore::timeline.item>
</x-kore::timeline>
<x-kore::timeline>
    <x-kore::timeline.item label="Pedido realizado" timestamp="15 de marzo, 2024">
        Tu pedido ha sido realizado exitosamente.
    </x-kore::timeline.item>
    <x-kore::timeline.item label="Enviado" timestamp="16 de marzo, 2024">
        Tu paquete está en camino.
    </x-kore::timeline.item>
</x-kore::timeline>

Con iconos y colores

Personaliza los marcadores con iconos Lucide y colores semánticos.

  1. Creado

    Día 1

  2. Tests pasando

    Día 3

  3. Bug encontrado

    Día 5

  4. Desplegado

    Día 7

<x-kore::timeline>
    <x-kore::timeline.item label="Creado" icon="git-branch" color="primary" timestamp="Día 1" />
    <x-kore::timeline.item label="Tests pasando" icon="check" color="success" timestamp="Día 3" />
    <x-kore::timeline.item label="Bug encontrado" icon="bug" color="destructive" timestamp="Día 5" />
    <x-kore::timeline.item label="Desplegado" icon="rocket" color="success" timestamp="Día 7" />
</x-kore::timeline>
<x-kore::timeline>
    <x-kore::timeline.item label="Creado" icon="git-branch" color="primary" timestamp="Día 1" />
    <x-kore::timeline.item label="Tests pasando" icon="check" color="success" timestamp="Día 3" />
    <x-kore::timeline.item label="Bug encontrado" icon="bug" color="destructive" timestamp="Día 5" />
    <x-kore::timeline.item label="Desplegado" icon="rocket" color="success" timestamp="Día 7" />
</x-kore::timeline>

Variante alternate

Los items impares se alinean a la izquierda y los pares a la derecha.

  1. Kickoff

    Ene 2024

  2. Diseño

    Feb 2024

  3. Desarrollo

    Mar 2024

  4. Lanzamiento

    Abr 2024

<x-kore::timeline variant="alternate">
    <x-kore::timeline.item label="Kickoff" timestamp="Ene 2024" />
    <x-kore::timeline.item label="Diseño" timestamp="Feb 2024" />
    <x-kore::timeline.item label="Desarrollo" timestamp="Mar 2024" />
    <x-kore::timeline.item label="Lanzamiento" timestamp="Abr 2024" />
</x-kore::timeline>
<x-kore::timeline variant="alternate">
    <x-kore::timeline.item label="Kickoff" timestamp="Ene 2024" />
    <x-kore::timeline.item label="Diseño" timestamp="Feb 2024" />
    <x-kore::timeline.item label="Desarrollo" timestamp="Mar 2024" />
    <x-kore::timeline.item label="Lanzamiento" timestamp="Abr 2024" />
</x-kore::timeline>

Props

Prop Tipo Default Descripción
variant string left Layout: left, right, alternate
color string primary Color por defecto para marcadores

Props del item

Props

Prop Tipo Default Descripción
icon string|null null Icono Lucide para el marcador
color string|null null Color del marcador: primary, success, warning, destructive, info, muted
label string|null null Título del evento
timestamp string|null null Fecha/hora del evento

Configuración

Puedes personalizar los defaults en config/kore-ui.php.

config/kore-ui.php 
'timeline' => [
    'variant' => 'left',
],
'timeline' => [
    'variant' => 'left',
],