...

Setup

Create New

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

...

Set NodeType

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

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

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

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

  colour	Red
  title	need check

...

...

Set Config

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

...

Type 01. Single

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

...

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

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

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

• Init Validation :

Type 02. Multiple

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

...

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

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

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

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

  • Init Validation :

  • Enable Condition :

...

Option Detail

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

...

1. Size

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

2. Hide Title

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

...

3. Step Direction

Status
colour Yellow title new

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

Status
colour Green title tip

Steps Direction & Position

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

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

...

4. Step Type

Status
colour Yellow title new

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

...

...

5. Show Navigation

Status
colour Yellow title new

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

...

6. Clickable

Status
colour Yellow title new

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

...

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