Stepper

MSK Stepper는 다단계(wizard) 진행 상태를 보여주는 primitive입니다. 완료/현재/예정 상태를 자동으로 표시하고 번호 마커를 주입합니다.

Preview

<ol data-msk-stepper data-current="1">
  <li data-msk-step>계정</li>
  <li data-msk-step>프로필</li>
  <li data-msk-step>완료</li>
</ol>

data-msk-step-clickable="true"를 단계에 추가하면 클릭으로 이동할 수 있습니다.

window.MSK.ui.stepper.setStep(root, 2);
window.MSK.ui.stepper.next(root);
window.MSK.ui.stepper.previous(root);

root.addEventListener('msk:step-change', (event) => {
  console.log(event.detail.index);
});