ステップ

ステップインジケーター（ウィザード）。デフォルト、背景なし、細線、ラインの各スタイル、横または縦向きで、クリックによる移動も可能です。

ステップ

ステップ

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