BackOffice Builder는 27개의 입력 컴포넌트를 제공한다.
AutoComplete, Boolean, Cascader, Checkbox, CodeEditor, Color, Date, File, GoogleMap,
HistoryTable, Image, Include, JsonEditor, Location, Map, Number, Password, Radio, Rate,
Select, Slider, Tags, Text, Time, TimeRange, Zipcode
<작성중>
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 | Select |  창을 펼쳐 여러 정보를 확인하고 선택해야 하는 경우 사용 |
14 | Number |  |
15 | Password | |
16 | Color | |
17 | File | |
18 | Image | |
19 | Zipcode | |
20 | Location | |
21 | Map | |
22 | GoogleMap | |
23 | Date | |
24 | Date Range | |
25 | Time | |
26 | Time Range | |
27 | Slider | |
28 | Rate | |
29 | Tags | |
- | HistoryTable | 컨테이너와 차이 확인 필요 |
7 | Buttons |  사용자의 결정에 대한 정보를 입력 받을 경우 사용 |
8 | Switch |  특정 상태를 ON/OFF 할 경우 사용 |
9 | DatePicker |  날짜 정보를 선택하여 입력해야 하는 경우 사용 |
10 | TimePicker |  시간 정보를 선택하여 입력해야 하는 경우 사용 |
11 | Transfer |  두 개의 데이터 그룹 간의 정보 전송이 필요한 경우 사용 |
12 | Rate |  평가 정보를 표시해야 하는 경우 사용 |
입력 유형
Input Component는 5가지 유형으로 분류 할 수 있다.
No | Data Type | Components |
|---|---|---|
1 | 숫자형(Integer) | Number, Rate, Slider |
2 | 문자형(String/Text) | Text, Textarea, TextEditor, Password, Tags, Color |
3 | 날짜형(Date) | Date, BirthDate, DateRange, DateTime, DateTimeRange |
4 | 삽입형(File/Image) | File, Image, ImageEditor |
5 | 선택형(boolean/Reference) | Switch, Radio, Select, Cascader, Checkbox, Transfer, Button |
※ PropertyType 에 따라 적용 가능한 컴포넌트 종류는 상이하다.
1. 숫자형 : Integer
No | Elements | Description |
|---|---|---|
1 | Number Input |  |
2 | Rate |  |
3 | Slider |  |
2. 문자형 : String/Text
No | Elements | Description |
|---|---|---|
1 | Text |  |
2 | Textarea |  |
3 | TextEditor |  |
4 | Password |  |
5 | Tags |  |
6 | Color |  |
3. 날짜형 : Date
Date, BirthDate, DateRange, DateTime, DateTimeRange
No | Elements | Description |
|---|---|---|
1 | Date |  |
2 | BirthDate |  |
3 | DateRange |  |
4 | DateTime |  |
5 | DateTimeRange |  |
4. 삽입형 : File/Image
File, Image, ImageEditor
No | Elements | Description | |
|---|---|---|---|
1 | File |  |  |
 |  | ||
2 | Image |  |  |
 |  | ||
3 | ImageEditor | NEED CHECK | |
5. 선택형 : boolean/Reference
Switch, Radio, Select, Cascader, Checkbox, Transfer, Button
No | Elements | Description |
|---|---|---|
1 | Switch(Boolean) |   |
2 | Radio |  |
3 | Select |  |
4 | Select-Multiple CHECK NAME |  |
5 | Cascader |  |
6 | CascaderMultiple |  |
7 | Checkbox |  |
8 | Transfer |  |
9 | Button |  |