Steps

Chỉ báo các bước (wizard) với nhiều kiểu: mặc định, không nền, mảnh, dạng line; ngang hoặc dọc; có thể bấm để chuyển bước.

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	Kiểu	Mặc định
items*	array	—
current	number	0
variant	string	"default"
clickable	boolean	—
vertical	boolean	—

Sự kiện: update:current