最新
步骤条Horizontal Numbered Stepper
A row of numbered markers joined by connectors, with completed steps shown as checks.
#stepper#horizontal#numbered
3 个框架初级
Loading…
A stepper header over a content panel with working Back and Next controls.
<!--
The markup shows one frame of the interactive wizard; the React/TypeScript tabs
own the state. Back is disabled on the first step and Next becomes a disabled
"Done" on the last, so the controls never point past the ends of the flow.
-->
<div class="w-full">
<ol class="flex items-center">
<li class="flex flex-1 items-center">
<span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-blue-600 text-sm font-semibold text-white">
<svg viewBox="0 0 20 20" fill="currentColor" class="h-4 w-4" aria-hidden="true"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0l-3.5-3.5a1 1 0 1 1 1.4-1.4l2.8 2.8 6.8-6.8a1 1 0 0 1 1.4 0Z" clip-rule="evenodd"/></svg>
</span>
<span aria-hidden="true" class="mx-2 h-px flex-1 bg-blue-600"></span>
</li>
<li class="flex flex-1 items-center" aria-current="step">
<span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full border-2 border-blue-600 text-sm font-semibold text-blue-600 dark:text-blue-400">2</span>
<span aria-hidden="true" class="mx-2 h-px flex-1 bg-gray-200 dark:bg-gray-700"></span>
</li>
<li class="flex items-center">
<span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-gray-300 text-sm font-semibold text-gray-500 dark:border-gray-700 dark:text-gray-400">3</span>
</li>
</ol>
<div class="mt-6 rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-800 dark:bg-gray-900">
<h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Company details</h3>
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Tell us who you are so we can tailor the workspace.</p>
</div>
<div class="mt-4 flex items-center justify-between gap-3">
<button type="button" class="inline-flex min-h-[2.5rem] items-center justify-center rounded-lg border border-gray-300 px-4 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800">Back</button>
<button type="button" class="inline-flex min-h-[2.5rem] items-center justify-center rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-700">Next</button>
</div>
</div>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
steps必填 | { title: string; description?: string }[] | - | 流程的有序步骤。 |
initialStep | number | 0 | Initial step |
State lives in the React and TypeScript tabs: Back is disabled on the first step and Next becomes a disabled "Done" on the last, so the controls never point past the ends. Pass `steps` as `{ title, description? }` and an optional `initialStep`.