Pinion UI — Stepper

最簡 — 透過 items 陣列傳入

Sign up

2

Verify email

3

Invite team

<x-stepper :items="[
    ['label' => 'Sign up',      'state' => 'done'],
    ['label' => 'Verify email', 'state' => 'current'],
    ['label' => 'Invite team',  'state' => 'upcoming'],
]" />

<ol class="flex items-start gap-2 w-full">
<li class="flex flex-col items-center shrink-0">
<div class="w-9 h-9 rounded-full border-2 shrink-0 flex items-center justify-center text-sm font-semibold transition-colors bg-primary border-primary text-primary-content">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentcolor" class="w-4 h-4">
<path fill-rule="evenodd" d="M16.704 5.29a1 1 0 0 1 .006 1.414l-7.5 7.6a1 1 0 0 1-1.42.005l-3.5-3.5a1 1 0 0 1 1.414-1.414l2.79 2.79 6.794-6.886a1 1 0 0 1 1.416-.009Z" clip-rule="evenodd"></path></svg>
</div>
<div class="mt-2 text-center">
<div class="text-sm font-medium">
                Sign up
            </div>
</div>
<div class="flex-1 h-0.5 mt-4 min-w-6 bg-primary"></div>
</li>
<li class="flex flex-col items-center shrink-0">
<div class="w-9 h-9 rounded-full border-2 shrink-0 flex items-center justify-center text-sm font-semibold transition-colors bg-base-100 border-primary text-primary">
            2
        </div>
<div class="mt-2 text-center">
<div class="text-sm font-medium">
                Verify email
            </div>
</div>
<div class="flex-1 h-0.5 mt-4 min-w-6 bg-base-content/20"></div>
</li>
<li class="flex flex-col items-center shrink-0">
<div class="w-9 h-9 rounded-full border-2 shrink-0 flex items-center justify-center text-sm font-semibold transition-colors bg-base-100 border-base-content/20 text-base-content/40">
            3
        </div>
<div class="mt-2 text-center">
<div class="text-sm font-medium">
                Invite team
            </div>
</div>
</li>
</ol>

with descriptions

Cart

3 items

Address

Confirmed

3

Payment

Visa ····

4

Confirm

Review

<x-stepper :items="[
    ['label' => 'Cart',    'desc' => '3 items',   'state' => 'done'],
    ['label' => 'Address', 'desc' => 'Confirmed', 'state' => 'done'],
    ['label' => 'Payment', 'desc' => 'Visa ····', 'state' => 'current'],
    ['label' => 'Confirm', 'desc' => 'Review',    'state' => 'upcoming'],
]" />

<ol class="flex items-start gap-2 w-full">
<li class="flex flex-col items-center shrink-0">
<div class="w-9 h-9 rounded-full border-2 shrink-0 flex items-center justify-center text-sm font-semibold transition-colors bg-primary border-primary text-primary-content">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentcolor" class="w-4 h-4">
<path fill-rule="evenodd" d="M16.704 5.29a1 1 0 0 1 .006 1.414l-7.5 7.6a1 1 0 0 1-1.42.005l-3.5-3.5a1 1 0 0 1 1.414-1.414l2.79 2.79 6.794-6.886a1 1 0 0 1 1.416-.009Z" clip-rule="evenodd"></path></svg>
</div>
<div class="mt-2 text-center">
<div class="text-sm font-medium">
                Cart
            </div>
<div class="text-xs text-base-content/60 mt-0.5">
                3 items
            </div>
</div>
<div class="flex-1 h-0.5 mt-4 min-w-6 bg-primary"></div>
</li>
<li class="flex flex-col items-center shrink-0">
<div class="w-9 h-9 rounded-full border-2 shrink-0 flex items-center justify-center text-sm font-semibold transition-colors bg-primary border-primary text-primary-content">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentcolor" class="w-4 h-4">
<path fill-rule="evenodd" d="M16.704 5.29a1 1 0 0 1 .006 1.414l-7.5 7.6a1 1 0 0 1-1.42.005l-3.5-3.5a1 1 0 0 1 1.414-1.414l2.79 2.79 6.794-6.886a1 1 0 0 1 1.416-.009Z" clip-rule="evenodd"></path></svg>
</div>
<div class="mt-2 text-center">
<div class="text-sm font-medium">
                Address
            </div>
<div class="text-xs text-base-content/60 mt-0.5">
                Confirmed
            </div>
</div>
<div class="flex-1 h-0.5 mt-4 min-w-6 bg-primary"></div>
</li>
<li class="flex flex-col items-center shrink-0">
<div class="w-9 h-9 rounded-full border-2 shrink-0 flex items-center justify-center text-sm font-semibold transition-colors bg-base-100 border-primary text-primary">
            3
        </div>
<div class="mt-2 text-center">
<div class="text-sm font-medium">
                Payment
            </div>
<div class="text-xs text-base-content/60 mt-0.5">
                Visa ····
            </div>
</div>
<div class="flex-1 h-0.5 mt-4 min-w-6 bg-base-content/20"></div>
</li>
<li class="flex flex-col items-center shrink-0">
<div class="w-9 h-9 rounded-full border-2 shrink-0 flex items-center justify-center text-sm font-semibold transition-colors bg-base-100 border-base-content/20 text-base-content/40">
            4
        </div>
<div class="mt-2 text-center">
<div class="text-sm font-medium">
                Confirm
            </div>
<div class="text-xs text-base-content/60 mt-0.5">
                Review
            </div>
</div>
</li>
</ol>

orientation=vertical

Requirements

Scope agreed

Design

Mockups approved

3

Build

In progress

4

Release

Scheduled

<x-stepper orientation="vertical" :items="[
    ['label' => 'Requirements', 'desc' => 'Scope agreed',      'state' => 'done'],
    ['label' => 'Design',       'desc' => 'Mockups approved',  'state' => 'done'],
    ['label' => 'Build',        'desc' => 'In progress',       'state' => 'current'],
    ['label' => 'Release',      'desc' => 'Scheduled',         'state' => 'upcoming'],
]" />

<ol class="flex flex-col gap-1">
<li class="flex gap-3 items-start">
<div class="w-9 h-9 rounded-full border-2 shrink-0 flex items-center justify-center text-sm font-semibold transition-colors bg-primary border-primary text-primary-content">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentcolor" class="w-4 h-4">
<path fill-rule="evenodd" d="M16.704 5.29a1 1 0 0 1 .006 1.414l-7.5 7.6a1 1 0 0 1-1.42.005l-3.5-3.5a1 1 0 0 1 1.414-1.414l2.79 2.79 6.794-6.886a1 1 0 0 1 1.416-.009Z" clip-rule="evenodd"></path></svg>
</div>
<div class="flex-1 pt-1">
<div class="text-sm font-medium">
                Requirements
            </div>
<div class="text-xs text-base-content/60 mt-0.5">
                Scope agreed
            </div>
</div>
<div class="w-0.5 h-6 ml-4 shrink-0 bg-primary"></div>
</li>
<li class="flex gap-3 items-start">
<div class="w-9 h-9 rounded-full border-2 shrink-0 flex items-center justify-center text-sm font-semibold transition-colors bg-primary border-primary text-primary-content">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentcolor" class="w-4 h-4">
<path fill-rule="evenodd" d="M16.704 5.29a1 1 0 0 1 .006 1.414l-7.5 7.6a1 1 0 0 1-1.42.005l-3.5-3.5a1 1 0 0 1 1.414-1.414l2.79 2.79 6.794-6.886a1 1 0 0 1 1.416-.009Z" clip-rule="evenodd"></path></svg>
</div>
<div class="flex-1 pt-1">
<div class="text-sm font-medium">
                Design
            </div>
<div class="text-xs text-base-content/60 mt-0.5">
                Mockups approved
            </div>
</div>
<div class="w-0.5 h-6 ml-4 shrink-0 bg-primary"></div>
</li>
<li class="flex gap-3 items-start">
<div class="w-9 h-9 rounded-full border-2 shrink-0 flex items-center justify-center text-sm font-semibold transition-colors bg-base-100 border-primary text-primary">
            3
        </div>
<div class="flex-1 pt-1">
<div class="text-sm font-medium">
                Build
            </div>
<div class="text-xs text-base-content/60 mt-0.5">
                In progress
            </div>
</div>
<div class="w-0.5 h-6 ml-4 shrink-0 bg-base-content/20"></div>
</li>
<li class="flex gap-3 items-start">
<div class="w-9 h-9 rounded-full border-2 shrink-0 flex items-center justify-center text-sm font-semibold transition-colors bg-base-100 border-base-content/20 text-base-content/40">
            4
        </div>
<div class="flex-1 pt-1">
<div class="text-sm font-medium">
                Release
            </div>
<div class="text-xs text-base-content/60 mt-0.5">
                Scheduled
            </div>
</div>
</li>
</ol>

variant=dotted (緊湊)

<x-stepper variant="dotted" :items="[
    ['state' => 'done'],
    ['state' => 'done'],
    ['state' => 'current'],
    ['state' => 'upcoming'],
    ['state' => 'upcoming'],
]" />

<ol class="flex items-start gap-2 w-full">
<li class="flex flex-col items-center shrink-0">
<div class="w-3 h-3 rounded-full border-2 shrink-0 flex items-center justify-center transition-colors bg-primary border-primary text-primary-content"></div>
<div class="mt-2 text-center">
<div class="text-sm font-medium"></div>
</div>
<div class="flex-1 h-0.5 mt-[5px] min-w-3 bg-primary"></div>
</li>
<li class="flex flex-col items-center shrink-0">
<div class="w-3 h-3 rounded-full border-2 shrink-0 flex items-center justify-center transition-colors bg-primary border-primary text-primary-content"></div>
<div class="mt-2 text-center">
<div class="text-sm font-medium"></div>
</div>
<div class="flex-1 h-0.5 mt-[5px] min-w-3 bg-primary"></div>
</li>
<li class="flex flex-col items-center shrink-0">
<div class="w-3 h-3 rounded-full border-2 shrink-0 flex items-center justify-center transition-colors bg-base-100 border-primary text-primary"></div>
<div class="mt-2 text-center">
<div class="text-sm font-medium"></div>
</div>
<div class="flex-1 h-0.5 mt-[5px] min-w-3 bg-base-content/20"></div>
</li>
<li class="flex flex-col items-center shrink-0">
<div class="w-3 h-3 rounded-full border-2 shrink-0 flex items-center justify-center transition-colors bg-base-100 border-base-content/20 text-base-content/40"></div>
<div class="mt-2 text-center">
<div class="text-sm font-medium"></div>
</div>
<div class="flex-1 h-0.5 mt-[5px] min-w-3 bg-base-content/20"></div>
</li>
<li class="flex flex-col items-center shrink-0">
<div class="w-3 h-3 rounded-full border-2 shrink-0 flex items-center justify-center transition-colors bg-base-100 border-base-content/20 text-base-content/40"></div>
<div class="mt-2 text-center">
<div class="text-sm font-medium"></div>
</div>
</li>
</ol>

vertical + dotted

Step 1 — done

Step 2 — done

Step 3 — current

Step 4 — upcoming

<x-stepper orientation="vertical" variant="dotted" :items="[
    ['label' => 'Step 1 — done',     'state' => 'done'],
    ['label' => 'Step 2 — done',     'state' => 'done'],
    ['label' => 'Step 3 — current',  'state' => 'current'],
    ['label' => 'Step 4 — upcoming', 'state' => 'upcoming'],
]" />

<ol class="flex flex-col gap-1">
<li class="flex gap-3 items-start">
<div class="w-3 h-3 rounded-full border-2 shrink-0 flex items-center justify-center transition-colors bg-primary border-primary text-primary-content"></div>
<div class="flex-1 pt-1">
<div class="text-sm font-medium">
                Step 1 — done
            </div>
</div>
<div class="w-0.5 h-3 ml-[5px] shrink-0 bg-primary"></div>
</li>
<li class="flex gap-3 items-start">
<div class="w-3 h-3 rounded-full border-2 shrink-0 flex items-center justify-center transition-colors bg-primary border-primary text-primary-content"></div>
<div class="flex-1 pt-1">
<div class="text-sm font-medium">
                Step 2 — done
            </div>
</div>
<div class="w-0.5 h-3 ml-[5px] shrink-0 bg-primary"></div>
</li>
<li class="flex gap-3 items-start">
<div class="w-3 h-3 rounded-full border-2 shrink-0 flex items-center justify-center transition-colors bg-base-100 border-primary text-primary"></div>
<div class="flex-1 pt-1">
<div class="text-sm font-medium">
                Step 3 — current
            </div>
</div>
<div class="w-0.5 h-3 ml-[5px] shrink-0 bg-base-content/20"></div>
</li>
<li class="flex gap-3 items-start">
<div class="w-3 h-3 rounded-full border-2 shrink-0 flex items-center justify-center transition-colors bg-base-100 border-base-content/20 text-base-content/40"></div>
<div class="flex-1 pt-1">
<div class="text-sm font-medium">
                Step 4 — upcoming
            </div>
</div>
</li>
</ol>

全部 done — 已完成狀態

Order

Pay

Ship

Done

<x-stepper :items="[
    ['label' => 'Order', 'state' => 'done'],
    ['label' => 'Pay',   'state' => 'done'],
    ['label' => 'Ship',  'state' => 'done'],
    ['label' => 'Done',  'state' => 'done'],
]" />

<ol class="flex items-start gap-2 w-full">
<li class="flex flex-col items-center shrink-0">
<div class="w-9 h-9 rounded-full border-2 shrink-0 flex items-center justify-center text-sm font-semibold transition-colors bg-primary border-primary text-primary-content">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentcolor" class="w-4 h-4">
<path fill-rule="evenodd" d="M16.704 5.29a1 1 0 0 1 .006 1.414l-7.5 7.6a1 1 0 0 1-1.42.005l-3.5-3.5a1 1 0 0 1 1.414-1.414l2.79 2.79 6.794-6.886a1 1 0 0 1 1.416-.009Z" clip-rule="evenodd"></path></svg>
</div>
<div class="mt-2 text-center">
<div class="text-sm font-medium">
                Order
            </div>
</div>
<div class="flex-1 h-0.5 mt-4 min-w-6 bg-primary"></div>
</li>
<li class="flex flex-col items-center shrink-0">
<div class="w-9 h-9 rounded-full border-2 shrink-0 flex items-center justify-center text-sm font-semibold transition-colors bg-primary border-primary text-primary-content">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentcolor" class="w-4 h-4">
<path fill-rule="evenodd" d="M16.704 5.29a1 1 0 0 1 .006 1.414l-7.5 7.6a1 1 0 0 1-1.42.005l-3.5-3.5a1 1 0 0 1 1.414-1.414l2.79 2.79 6.794-6.886a1 1 0 0 1 1.416-.009Z" clip-rule="evenodd"></path></svg>
</div>
<div class="mt-2 text-center">
<div class="text-sm font-medium">
                Pay
            </div>
</div>
<div class="flex-1 h-0.5 mt-4 min-w-6 bg-primary"></div>
</li>
<li class="flex flex-col items-center shrink-0">
<div class="w-9 h-9 rounded-full border-2 shrink-0 flex items-center justify-center text-sm font-semibold transition-colors bg-primary border-primary text-primary-content">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentcolor" class="w-4 h-4">
<path fill-rule="evenodd" d="M16.704 5.29a1 1 0 0 1 .006 1.414l-7.5 7.6a1 1 0 0 1-1.42.005l-3.5-3.5a1 1 0 0 1 1.414-1.414l2.79 2.79 6.794-6.886a1 1 0 0 1 1.416-.009Z" clip-rule="evenodd"></path></svg>
</div>
<div class="mt-2 text-center">
<div class="text-sm font-medium">
                Ship
            </div>
</div>
<div class="flex-1 h-0.5 mt-4 min-w-6 bg-primary"></div>
</li>
<li class="flex flex-col items-center shrink-0">
<div class="w-9 h-9 rounded-full border-2 shrink-0 flex items-center justify-center text-sm font-semibold transition-colors bg-primary border-primary text-primary-content">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentcolor" class="w-4 h-4">
<path fill-rule="evenodd" d="M16.704 5.29a1 1 0 0 1 .006 1.414l-7.5 7.6a1 1 0 0 1-1.42.005l-3.5-3.5a1 1 0 0 1 1.414-1.414l2.79 2.79 6.794-6.886a1 1 0 0 1 1.416-.009Z" clip-rule="evenodd"></path></svg>
</div>
<div class="mt-2 text-center">
<div class="text-sm font-medium">
                Done
            </div>
</div>
</li>
</ol>