StepNav

status=current|done|not_yet · setCurrent(index) · 表示専用

Preview

進行中（done / current / not_yet）

入力

確認

完了

未着手

カート

お届け先

支払い

完了

入力

確認

完了

setCurrent(index)

入力

確認

完了

setCurrent(0)

setCurrent(1)

setCurrent(2)

クリックでは遷移しません。setCurrent は指定インデックスのみ current にします。

HTML

<tw-step-nav>
  <div status="done">入力</div>
  <div status="current">確認</div>
  <div status="not_yet">完了</div>
</tw-step-nav>

<tw-step-nav>
  <div status="not_yet">カート</div>
  <div status="not_yet">お届け先</div>
  <div status="not_yet">支払い</div>
  <div status="not_yet">完了</div>
</tw-step-nav>

<tw-step-nav id="step-nav-api">
  <div status="not_yet">入力</div>
  <div status="not_yet">確認</div>
  <div status="not_yet">完了</div>
</tw-step-nav>
<button type="button" id="…">setCurrent(0)</button>

import "@b4moss/the-wheels";

const nav = document.getElementById("step-nav-api");
document.getElementById("step-to-0")?.addEventListener("click", () => {
  nav?.setCurrent(0);
});
document.getElementById("step-to-1")?.addEventListener("click", () => {
  nav?.setCurrent(1);
});
document.getElementById("step-to-2")?.addEventListener("click", () => {
  nav?.setCurrent(2);
});

import "@b4moss/the-wheels";
import type { TwStepNav } from "@b4moss/the-wheels";

const nav = document.getElementById("step-nav-api") as TwStepNav | null;
document.getElementById("step-to-0")?.addEventListener("click", () => {
  nav?.setCurrent(0);
});
document.getElementById("step-to-1")?.addEventListener("click", () => {
  nav?.setCurrent(1);
});
document.getElementById("step-to-2")?.addEventListener("click", () => {
  nav?.setCurrent(2);
});