/
Divider

Divider

 

 

 

Basic UI

영역을 구분짓는 Divider 컴포넌트는 주로 Form 내에서 사용되며, 단일형과 그룹형 2가지 타입으로 크게 구분된다.

 

1. Single Type

단일 Divider의 기본 UI는 다음과 같이 LabelLine으로 구성되어져 있다.

 

Dashed, Hidden Divider 옵션을 추가하여 다음과 같은 UI로 커스터마이징하여 사용 할 수 있다.

Dashed

Hidden Divider

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에서는 버튼을 추가하여 사용 할 수 있다.