Steps

여러 단계로 이루어진 작업의 현재 위치와 진행 상태를 보여줍니다.

<sy-steps>설치 안내 기본 사용법

Live preview

컴포넌트를 조작하면 여기에 결과가 표시됩니다.

현재 단계시작 번호방향크기

단계 선택전체 완료

코드 보기

HTML

<sy-steps
  current="1"
  start-index="0"
  type="horizontal"
  size="medium"
  clickable
  id="sample"
>
  <sy-step description="기본 정보를 입력합니다.">정보 입력</sy-step>
  <sy-step description="입력 내용을 확인합니다.">검토</sy-step>
  <sy-step description="작업이 완료됩니다.">완료</sy-step>
</sy-steps>

<script type="module">
  await (root => {
    const steps = root.querySelector('sy-steps');
    steps.addEventListener('selected', event => {
      steps.current = event.detail.index;
    });
  })(document);
</script>

사용 가이드

신청·설정처럼 순서가 있는 작업 흐름을 보여줍니다. 독립된 화면 전환에는 Tabs를 사용하세요.

단계와 현재 위치 설정
current는 기본적으로 0부터 시작하는 인덱스입니다.
시작 번호와 완료 상태 지정
startIndex를 1로 바꾸면 단계 번호와 current의 기준도 1부터 시작합니다. 전체 과정이 끝나면 complete를 적용하세요.
이동 요청 처리
clickable을 켜고 selected.detail.index를 받습니다. 현재 단계의 검사를 통과한 뒤 current를 변경하세요.

예제

작업 진행

현재 단계 이전은 완료, 이후는 대기 상태로 표시합니다.

코드 보기

HTML

<sy-steps current="1" id="sample">
  <sy-step description="기본 정보를 입력합니다.">정보 입력</sy-step>
  <sy-step description="입력 내용을 확인합니다.">검토</sy-step>
  <sy-step description="작업이 완료됩니다.">완료</sy-step>
</sy-steps>

<script type="module">
  await (root => {
    const steps = root.querySelector('sy-steps');
    steps.addEventListener('selected', event => {
      steps.current = event.detail.index;
    });
  })(document);
</script>

단계 선택

단계를 클릭하거나 키보드로 선택하면 current를 갱신하는 앱 코드를 함께 제공합니다.

코드 보기

HTML

<sy-steps
  current="0"
  clickable
  id="sample"
>
  <sy-step description="기본 정보를 입력합니다.">정보 입력</sy-step>
  <sy-step description="입력 내용을 확인합니다.">검토</sy-step>
  <sy-step description="작업이 완료됩니다.">완료</sy-step>
</sy-steps>

<script type="module">
  await (root => {
    const steps = root.querySelector('sy-steps');
    steps.addEventListener('selected', event => {
      steps.current = event.detail.index;
    });
  })(document);
</script>

세로 배치

단계별 설명이 길거나 좁은 영역에는 세로 배치를 사용하세요.

코드 보기

HTML

<sy-steps
  current="1"
  type="vertical"
  id="sample"
>
  <sy-step description="기본 정보를 입력합니다.">정보 입력</sy-step>
  <sy-step description="입력 내용을 확인합니다.">검토</sy-step>
  <sy-step description="작업이 완료됩니다.">완료</sy-step>
</sy-steps>

<script type="module">
  await (root => {
    const steps = root.querySelector('sy-steps');
    steps.addEventListener('selected', event => {
      steps.current = event.detail.index;
    });
  })(document);
</script>

오류와 처리 중

각 단계의 status·loading으로 작업 상태를 명확히 표시합니다.

코드 보기

HTML

<div style="display:grid;gap:16px;width:100%">
  <sy-steps current="1">
    <sy-step description="기본 정보를 입력합니다.">정보 입력</sy-step>
    <sy-step description="입력 내용을 확인합니다." status="error">검토</sy-step>
    <sy-step description="작업이 완료됩니다.">완료</sy-step>
  </sy-steps>
  <sy-steps current="1" size="small">
    <sy-step description="기본 정보를 입력합니다.">정보 입력</sy-step>
    <sy-step description="입력 내용을 확인합니다." loading>검토</sy-step>
    <sy-step description="작업이 완료됩니다.">완료</sy-step>
  </sy-steps>
</div>

완료와 시작 번호

startIndex를 1로 시작하고 모든 단계가 완료된 상태를 표시합니다.

코드 보기

HTML

<sy-steps
  start-index="1"
  current="3"
  complete
  id="sample"
>
  <sy-step description="기본 정보를 입력합니다.">정보 입력</sy-step>
  <sy-step description="입력 내용을 확인합니다.">검토</sy-step>
  <sy-step description="작업이 완료됩니다.">완료</sy-step>
</sy-steps>

<script type="module">
  await (root => {
    const steps = root.querySelector('sy-steps');
    steps.addEventListener('selected', event => {
      steps.current = event.detail.index;
    });
  })(document);
</script>

이동 제한

특정 단계는 disabled로 선택을 막을 수 있습니다.

코드 보기

HTML

<sy-steps clickable id="sample">
  <sy-step description="기본 정보를 입력합니다.">정보 입력</sy-step>
  <sy-step description="입력 내용을 확인합니다." disabled>검토</sy-step>
  <sy-step description="작업이 완료됩니다.">완료</sy-step>
</sy-steps>

<script type="module">
  await (root => {
    const steps = root.querySelector('sy-steps');
    steps.addEventListener('selected', event => {
      steps.current = event.detail.index;
    });
  })(document);
</script>

이벤트와 전달 값

컴포넌트를 조작하고 최근 이벤트의 이름과 detail 값을 확인하세요. 코드에는 이 컴포넌트와 하위 구성 요소가 보내는 이벤트의 구독 방법이 모두 포함되어 있습니다.

코드 보기

HTML

<sy-steps
  current="1"
  start-index="0"
  type="horizontal"
  size="medium"
  clickable
  id="sample"
>
  <sy-step description="기본 정보를 입력합니다.">정보 입력</sy-step>
  <sy-step description="입력 내용을 확인합니다.">검토</sy-step>
  <sy-step description="작업이 완료됩니다.">완료</sy-step>
</sy-steps>
<output id="demo-events" aria-live="polite">컴포넌트를 조작하면 최근 이벤트와 전달 값이 표시됩니다.
</output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? '완료';
  await (root => {
    const steps = root.querySelector('sy-steps');
    steps.addEventListener('selected', event => {
      steps.current = event.detail.index;
    });
  })(document);
  for (const name of ["selected"]) {
    document.addEventListener(name, event => {
      document.querySelector('#demo-events').textContent =
        `${event.target.localName} · ${name}: ${describeResult(event.detail)}`;
    });
  }
</script>

1부터 시작하는 단계

표시 번호를 1부터 시작하고 두 번째 단계를 현재 단계로 표시합니다.

코드 보기

HTML

<sy-steps
  current="2"
  start-index="1"
  type="horizontal"
  size="medium"
  clickable
  id="sample"
>
  <sy-step description="기본 정보를 입력합니다.">정보 입력</sy-step>
  <sy-step description="입력 내용을 확인합니다.">검토</sy-step>
  <sy-step description="작업이 완료됩니다.">완료</sy-step>
</sy-steps>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "startIndex": 1,
    "current": 2
  });
  await (root => {
    const steps = root.querySelector('sy-steps');
    steps.addEventListener('selected', event => {
      steps.current = event.detail.index;
    });
  })(document);
</script>

기능별 예제

22개 주제에서 필요한 기능을 선택하세요. 속성 설정, 메서드 호출, 이벤트 결과와 슬롯 구성을 실행 화면과 코드로 확인할 수 있습니다.

기능 찾기

사용 예제 · Item Overview

선택한 예제를 직접 조작해 보세요. 여러 구성이 있는 주제는 세부 예제를 바꿀 수 있습니다.

코드 보기

HTML

예제를 불러오고 있습니다.

사용 예제 · Overview

선택한 예제를 직접 조작해 보세요. 여러 구성이 있는 주제는 세부 예제를 바꿀 수 있습니다.

코드 보기

HTML

예제를 불러오고 있습니다.