| Table of Contents |
|---|
...
No | Component | Description |
|---|---|---|
1 | Boolean |  |
2 | AutoComplete |  입력 필드의 자동 완성 기능이 필요한 경우 사용 |
3 | Text Input |  텍스트 정보를 입력 받을 경우 사용 |
4 | Textarea |  멀티 라인 텍스트 인풋 박스로 긴 텍스트 입력이 필요 할 경우 사용 |
5 | TextEditor |  텍스트, 이미지, 영상, 표, 목록, 라인, 에디팅 편집 기능이 필요한 경우 사용 |
6 | CodeEditor |   코딩 기능이 필요한 경우 사용 |
7 | JsonEditor |  코딩 기능 중 Json이 필요한 경우 사용 |
8 | Include | 확인 필요 |
9 | Checkbox |  여러 데이터의 중복 선택이 필요한 경우 사용 |
10 | Radio |  여러 데이터 중 1개만 선택해야 하는 경우 사용 |
11 | Cascader |  연관된 데이터 세트에서 쉽게 선택할 수 있도록 다단계 분류가 적용된 셀렉트 박스 |
12 | CascaderMultiple | |
13 | Number |  |
14 | Select |  창을 펼쳐 여러 정보를 확인하고 선택해야 하는 경우 사용 |
15 | SelectTree | |
16 | SelectModal | |
17 | Password | |
18 | Color | |
19 | File | |
20 | Image | |
21 | Zipcode | |
22 | Location | |
23 | Map | |
24 | GoogleMap | |
25 | Date |  날짜 정보를 선택하여 입력해야 하는 경우 사용 |
26 | Date Range | |
27 | Time |  시간 정보를 선택하여 입력해야 하는 경우 사용 |
28 | Time Range | |
29 | Slider | |
30 | Rate |  평가 정보를 표시해야 하는 경우 사용 |
31 | Tags | |
32 | HistoryTable | 컨테이너와 차이 확인 필요 |
Common options
입력 컴포넌트는 다음과 같이 공통 옵션을 동일하게 갖는다.
1. Size
사이즈 옵션은 Small, Default, Large 3가지로 제공한다.
2. Comment
컴포넌트 하단에 표시되는 코멘트 기능을 제공한다.
3. Tooltip
라벨 뒤에 표시되는 툴팁 기능을 제공한다.
...
...
라벨의 위치를 컴포넌트 좌측으로 변경 할 수 있다.
...
...
...
Preview
입력 컴포넌트는 입력 타입에 따라 6가지로 분류 할 수 있으며, 컴포넌트가 실제 화면에 출력되는 UI는 다음과 같다.
No | Type | Components | |||
|---|---|---|---|---|---|
1 | 숫자형 | Number, Rate, Slider | 2 | 문자형 | Text, Textarea, TextEditor, Password, Tags |
32 | 날짜/시간형 | Date, DateRange, Time, TimeRange | 4 선택형 | Boolean, Checkbox, Radio, Cascader, Select | |
3 | 삽입형 | File, Image | |||
4 | 숫자형 | Number, Rate, Slider, Color | |||
5 | 선택형 | Boolean, Checkbox, Radio, Cascader, Select, Color | 6 | 기능형날짜/시간형 | Date, DateRange, Time, TimeRange |
6 | 위치형 | Zipcode, Location, Map, GoogleMap | |||
7 | 특수형 | AutoComplete, CodeEditor, JsonEditor, Include, Zipcode, Location, Map |
1.
...
문자형
No | ElementsComponent | DescriptionPreview |
|---|---|---|
1 | Number InputText |   |
2 | RateTextarea |   |
3 | Slider |  |
...
TextEditor |  | |
4 | Password |  |
5 | Tags |  |
2. 선택형
Boolean, Checkbox, Radio, Cascader, Select, Color
No | ElementsComponent | DescriptionPreview |
|---|---|---|
1 | TextBoolean  |    |
2 | TextareaCheckbox |   |
3 | TextEditorRadio |   |
4 | PasswordCascader |   |
5 | CascaderMultipleTags |  |
6 |  Select |
...
 | No||
7 | ElementsSelectTree | Description |
18 | DateSelectModal |   2 |
3. 삽입형
No | Component | 3Preview | |
|---|---|---|---|
| DateRange 1 |  File | 4 | DateTime |
 25 | ImageDateTimeRange |   |   |
4.
...
숫자형
No | ElementsComponent | DescriptionPreview |
|---|---|---|
1 | FileNumber Input |   |
 2 |  Rate |   | 2
3 | ImageSlider |   |
 4 |  Color |   |
5.
...
날짜형
No | ElementsComponent | DescriptionPreview | ||||
|---|---|---|---|---|---|---|
1 | BooleanDate |    | ||||
2 | CheckboxDateRange |   | ||||
3 | RadioTime |   | ||||
4 | Cascader |  | 5 | CascaderMultiple | TimeRange |  |
6
...
Select
...
7
...
Select-Multiple
...
8
...
Color
...
. 위치형
Zipcode, Location, Map
No | Component | Preview |
|---|---|---|
1 | ||
2 | ||
3 | ||
4 |
7. 특수형
AutoComplete, CodeEditor, JsonEditor, Include,
No | Component | Preview |
|---|---|---|
1 | AutoComplete |  |
2 | CodeEditor | |
3 | JsonEditor | |
4 | Include | |
5 | Zipcode |
...
6 | Location | |
Map |
...
Common options
입력 컴포넌트는 다음과 같이 공통 옵션을 동일하게 갖는다.
1. Size
사이즈 옵션은 Small, Default, Large 3가지로 제공한다.
2. Comment
컴포넌트 하단에 표시되는 코멘트 기능을 제공한다.
3. Tooltip
라벨 뒤에 표시되는 툴팁 기능을 제공한다.
...
4. Next Line Label
라벨의 위치를 컴포넌트 좌측으로 변경 할 수 있다.
...