Setup

Create New

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

Open

Set NodeType

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

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

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

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

Open

Set Config

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

Type 01. Single

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

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

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

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

• Init Validation :

Type 02. Multiple

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

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

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

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

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

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

  • Init Validation :

  • Enable Condition :

Option Detail

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

1. Size

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

2. Hide Title

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

3. Step Direction new

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

tip Steps Direction & Position

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

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

4. Step Type new

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

• Icon Setting Type : 아이콘 설정 타입 선택(Unify, Separate) new

  • Select Icon : Unify 타입으로 아이콘을 설정할 경우 출력되는 아이콘 셀렉트 옵션

  • Enable Separate Step Icon : Separate 타입으로 아이콘 설정할 경우 스텝별 아이콘을 설정하는 영역 출력

TIP Icon Setting Type

- unify : 아이콘을 1개 선택 할 수 있고, 선택한 아이콘이 모든 스텝에 동일하게 적용된다.

- separate : 스텝 목록이 설정해 놓은 Config를 기준으로 자동 출력되고, 스텝 별로 아이콘 셋팅이 가능하다.

5. Show Navigation new

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

6. Clickable new

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

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