Logo
Neura UI
Loading…
Logo
All pages 86

To-do List

Agent to-dos driven by your data: each item has a status (pending / active / done). Optional autoPlay is for demos only.

Livewire / real data

Pass items as { label, status } . Update status as the agent progresses. Listen for todo-list-done when every item is done.
blade 
<div @todo-list-done="\$wire.onTodosComplete()">
    <neura::todo-list :items="\$todos" />
</div>


public array \$todos = [
    ['label' => 'Parse the agent request', 'status' => 'done'],
    ['label' => 'Draft the Blade component', 'status' => 'active'],
    ['label' => 'Wire Alpine interactions', 'status' => 'pending'],
];

Index control

With plain string labels, set current (−1 not started, 0…n−1 active, n all done).
blade 
<neura::todo-list
    :items="['…', '…', '…']"
    :current="\$step"
/>

Done snapshot

blade 
<neura::todo-list :items="\$todos" :done="true" />

Demo animation

Optional auto-play advances string items on a timer (docs / marketing).
blade 
<neura::todo-list :items="[…]" :auto-play="true" :step-ms="1600" />

Props

Prop Type Default Description
items string[] | {label, status}[] [] Tasks; status = pending|active|done
current int|null null Active index when using string items
done bool false Force all complete
autoPlay bool false Timed demo only