/
Divider
Divider
- 1 Basic UI
- 1.1 1. Single Type
- 1.2 2. Group Type
- 1.2.1 None(No-Line)
- 1.2.2 Border
- 1.2.3 Card
- 1.2.4 Collapse
- 2 Function
Basic UI
영역을 구분짓는 Divider 컴포넌트는 주로 Form 내에서 사용되며, 단일형과 그룹형 2가지 타입으로 크게 구분된다.
1. Single Type
단일 Divider의 기본 UI는 다음과 같이 Label
과 Line
으로 구성되어져 있다.
Dashed
, Hidden Divider
옵션을 추가하여 다음과 같은 UI로 커스터마이징하여 사용 할 수 있다.
Dashed | Hidden Divider |
---|---|
2. Group Type
그룹형의 Divider는 다음과 같이 4가지 타입으로 사용 할 수 있다.
None(No-Line)
그룹형 Divider의 기본 UI는 라인 구분이 없는 None
타입이다.
Border
컴포넌트들을 line으로 그룹핑하는 Border
타입이다.
Card
컴포넌트들을 Card
타입으로 그룹핑하여 사용 할 수 있다.
Collapse
컴포넌트들을 Collapse
타입으로 그룹핑하여 Open/Close 하며 사용 할 수 있다.
Function
1. Direction Type
Single Divider
에서는 Divider의 방향을 설정 할 수 있다. (Horizontal
, Vertical
)
2. Orientation
Single Divider
에서는 라벨의 위치를 설정하는 기능이다. (Left
, Center
, Right
)
3. Number of fields
Group Divider
에서는 필드 출력 Order를 숫자로 직접 입력하여 설정 할 수 있다.
4. Show Buttons
Group Divider
에서는 버튼을 추가하여 사용 할 수 있다.