Semantic UI Doc ( Elements - Step ) を読む

Semantic UI の Step を読んだ。ステップにテーマは 3 個ある。

ステップは一連の行動の中で、自分が今どのポイントにいるかを示す。基本的にグループで使うことを想定してつくられている。

<div class="ui steps">
  <div class="step"> ... </div>
  <div class="active step"> ... </div> <!-- アクティブ状態 -->
  <div class="disabled step"> ... </div> <!-- 無効状態 -->
</div>

.ui.ordered.steps で順序付きリストにすることもできるし、.ui.vertical.steps でステップを縦に並べて表示することもできる。

ステップに含めることができるコンテンツは、説明文、アイコン、リンクがある。

ステップは状態を持ち、アクティブ状態と、チェックマーク付きの完了状態、無効状態がある。

バリエーションもいくつかあり、ステップを横に並べて矢印でステップの方向を示す「Stackable」、幅いっぱいに表示する「Fluid」、ステップをコンテンツの上下にくっつける「Attached」、サイズのバリエーションなど。

ステップはフォームの進行状況をユーザーが確認したいときなどに使えそうだ。