Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 10 Next »

Setup

Create New

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

Set NodeType

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

  • Config : 스텝 목록 관리 테이블

  • Steps Options Set Area : 스텝 스타일과 기능 옵션을 설정하는 영역

  • Steps Done Page Set Area : 스텝 종료 시 이동할 Done Page를 설정하는 영역 NEED CHECK

Set Config

(plus) 을 클릭하면 Add Step 영역이 하단에 출력된다. 스텝 이름과 타입, 디스트립션 등을 설정하고 저장하면 Config 영역에 리스트업 된다. 스텝 목록에서 (blue star)을 클릭하여 Update Step 영역에서 스텝 설정 내용을 수정 할 수 있다.

Type 01. Single

스텝 타입을 Single로 선택하면 다음과 같은 셋팅 옵션이 출력된다.

  • Step Description : 스텝 하단에 출력될 디스크립션 입력

  • Instane Page : 스텝에 연결 할 페이지 입력 또는 선택

  • Event : 인스턴트 페이지에 추가로 출력 할 이벤트 선택

  • Init Validation :

Step Type{Single}

Type 02. Multiple

스텝 타입을 Multiple로 선택하면 다음과 같은 셋팅 옵션이 출력된다.

(plus) 을 클릭하면 Add Multiple Step 영역이 하단에 출력된다. Instance Page와 Event, Init Validation, Enable Condition을 설정하고 저장하면 Sub Config 영역에 리스트업 된다. 멀티플 스텝 목록에서 (blue star)을 클릭하여 Update Multiple Step 영역에서 멀티플 스텝 설정 내용을 수정 할 수 있다.

  • Step Description : 스텝 하단에 출력될 디스크립션 입력

  • Sub Config : 멀티 스텝의 Sub Config 목록 영역

    • Instane Page : 멀티 스텝에 연결 할 페이지 입력 또는 선택

    • Event : 인스턴트 페이지에 추가로 출력 할 이벤트 선택

    • Init Validation :

    • Enable Condition :

Step Type{Multiple}

Option Detail

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

1. Size

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

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

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

  • No labels