步骤条

步骤条（向导）提供多种样式：默认、无背景、细线、line；支持横向或竖向；可选可点击切换。

Steps

Steps

Vue

<div class="thl-stack">
  <ThlSteps v-model:current="cur" :items="items" clickable />
  <ThlSteps v-model:current="cur" :items="items" variant="line" clickable />
  <ThlSteps v-model:current="cur" :items="items" variant="thin" />
  <div class="thl-demo-row"><ThlButton :disabled="cur === 0" @click="cur--">Back</ThlButton><ThlButton variant="primary" :disabled="cur === items.length - 1" @click="cur++">Next</ThlButton></div>
</div>

React

const [cur, setCur] = useState(1);
<Steps items={items} current={cur} onChange={setCur} variant="line" />

Angular

<thl-steps [items]="items" [(current)]="cur" variant="line" clickable />

API

Steps

<ThlSteps> · import { ThlSteps } from '@thl-ui/vue'

Prop	类型	默认值
items*	array	—
current	number	0
variant	string	"default"
clickable	boolean	—
vertical	boolean	—

事件: update:current