| Table of Contents |
|---|
...
Setup
Create New
...
컴포넌트 Title은 기본 셋팅 옵션이다. 옵션 영역에서 탭 타이틀을 노출/비노출로 설정 할 수 있다.
| Info |
|---|
Hide Title{OFF} |
...
3. Step Direction
...
| Status | ||||
|---|---|---|---|---|
|
스텝의 디스플레이 방향을 설정 할 수 있다.(Horizontal, Vertical)
Steps Direction & Position
Status
colour Green title tip - Direction{
Horizontal} :Top위치에 스텝 컴포넌트가 가로로 디스플레이 된다.- Direction{
Vertical} :Left위치에 스텝 컴포넌트가 세로로 디스플레이 된다.
| Info |
|---|
Step Direction{Horizontal} → Default |
...
| Info |
|---|
Step Direction{Vertical} - https://ant.design/components/steps/#components-steps-demo-vertical |
...
4. Step Style
...
| Status | ||||
|---|---|---|---|---|
|
스텝의 스타일을 설정 할 수 있다.( Number, Dot, Icon)
| Info |
|---|
Step Style{Number} → Default |
...
| Info |
|---|
Step Style{Dot} - https://ant.design/components/steps/#components-steps-demo-progress-dot |
Icon Setting Type : 아이콘 설정 타입 선택(
Unify,Separate)Status colour Yellow title new Select Icon :
Unify타입으로 아이콘을 설정할 경우 출력되는 아이콘 셀렉트 옵션Enable Separate Step Icon :
Separate타입으로 아이콘 설정할 경우 스텝별 아이콘을 설정하는 영역 출력
Icon Setting Type
Status
colour Green title TIP - unify : 아이콘을 1개 선택 할 수 있고, 선택한 아이콘이 모든 스텝에 동일하게 적용된다.
- separate : 스텝 목록이 설정해 놓은 Config를 기준으로 자동 출력되고, 스텝 별로 아이콘 셋팅이 가능하다.
| Info |
|---|
Step Style{Icon}, Icon Setting Type{Separate} - https://ant.design/components/steps/#components-steps-demo-icon |
...
5. Use Step Navigation
| Status | ||||
|---|---|---|---|---|
|
현재 진행 중인 스텝을 네비게이션으로 표시할 수 있다.
| Info |
|---|
Use Step Navigation{ON} - https://ant.design/components/steps/#components-steps-demo-nav |
...
6. Clickable
| Status | ||||
|---|---|---|---|---|
|
스텝 클릭 기능을 설정할 수 있다. Clickabel{ON}일 경우, 모든 스텝 페이지에 [임시저장] 버튼이 기본으로 생성된다.
| Info |
|---|
Clickable{ON} - https://ant.design/components/steps/#components-steps-demo-clickable |
...
❗️ 클릭 시 해당 스텝에 연결된 페이지로 이동하며, 현재 머물던 페이지는 [임시저장] 해놓은 내용만 저장 된다.