Setup

Create New

스텝 컴포넌트를 추가하면 다음과 같은 기본 셋팅 화면이 출력된다.

Set NodeType

NodeType을 선택하면 다음과 같이 2가지 스텝 셋팅 영역이 출력된다.

Steps Options Set Area : 스텝 스타일과 기능 옵션을 설정하는 영역
Steps Done Page Set Area : 스텝 종료 시 이동할 Done Page를 설정하는 영역

Option Detail

스텝 옵션 상세 내용은 다음과 같다.

1. Size

스텝 사이즈를 선택 할 수 있다.(Small, Default)

2. Hide Title

컴포넌트 Title은 기본 셋팅 옵션이다. 옵션 영역에서 탭 타이틀을 노출/비노출로 설정 할 수 있다.

Hide Title{OFF}

3. Step Direction NEW

스텝의 디스플레이 방향을 설정 할 수 있다.(Horizontal, Vertical)

TIP Steps Direction & Position
- Direction{ Horizontal } : Top 위치에 스텝 컴포넌트가 가로로 디스플레이 된다.
- Direction{ Vertical } : Left 위치에 스텝 컴포넌트가 세로로 디스플레이 된다.

Step Direction{Horizontal} → Default

Step Direction{Vertical} - https://ant.design/components/steps/#components-steps-demo-vertical

4. Step Type NEW

스텝의 스타일을 설정 할 수 있다.( Number, Dot, Icon)

Step Type{Number} → Default

Step Type{Dot} - https://ant.design/components/steps/#components-steps-demo-progress-dot

Icon Setting Type : 아이콘 설정 타입 선택(Unify, Separate) NEW
- Select Icon : Unify 타입으로 아이콘을 설정할 경우 출력되는 아이콘 셀렉트 옵션
- Enable Separate Step Icon : Separate 타입으로 아이콘 설정할 경우 스텝별 아이콘을 설정하는 영역 출력

TIP Icon Setting Type
- unify : 아이콘을 1개 선택 할 수 있고, 선택한 아이콘이 모든 스텝에 동일하게 적용된다.
- separate : 스텝 목록이 설정해 놓은 Config를 기준으로 자동 출력되고, 스텝 별로 아이콘 셋팅이 가능하다.

Step Type{Icon}, Icon Setting Type{Separate} - https://ant.design/components/steps/#components-steps-demo-icon

5. Show Navigation NEW

현재 진행 중인 스텝을 네비게이션으로 표시할 수 있다.

Show Navigation{ON} - https://ant.design/components/steps/#components-steps-demo-nav

6. Clickable NEW

스텝 클릭 기능을 설정할 수 있다. Clickabel{ON}일 경우, 모든 스텝 페이지에 [임시저장] 버튼이 기본으로 생성된다.

Clickable{ON} - https://ant.design/components/steps/#components-steps-demo-clickable

❗️ 클릭 시 해당 스텝에 연결된 페이지로 이동하며, 현재 머물던 페이지는 [임시저장] 해놓은 내용만 저장 된다.