Input Component
- DXP Angela (Unlicensed)
- 1 Summary
- 2 Input Status
- 3 Preview
- 3.1 1. String Type
- 3.2 2. Select Type
- 3.3 3. Insert Type
- 3.4 4. Number Type
- 3.5 5. Date/Time Type
- 3.6 6. Place Type
- 3.7 7. Special Type
- 4 Common options
- 4.1 1. Size
- 4.2 2. Field Size
- 4.3 3. Fixed Field Size
- 4.4 4. Default Value
- 4.5 5. Form Reset Value
- 4.6 6. Disable
- 4.7 7. Hide Label
- 4.8 8. Next Line Label
- 4.9 9. Placeholder
- 4.10 10. Tooltip
- 4.11 11. Comment
Summary
BackOffice Builder는 30개의 입력 컴포넌트를 제공한다.
No | Component | Description |
|---|---|---|
1 |  | |
2 |  입력 필드의 자동 완성 기능이 필요한 경우 사용 | |
3 | 텍스트 정보를 입력 받을 경우 사용 | |
4 | 멀티 라인 텍스트 인풋 박스로 긴 텍스트 입력이 필요 할 경우 사용 | |
5 | 텍스트, 이미지, 영상, 표, 목록, 라인, 에디팅 편집 기능이 필요한 경우 사용 | |
6 | 코딩 기능이 필요한 경우 사용 | |
7 | 코딩 기능 중 Json이 필요한 경우 사용 | |
8 | Include Type으로 컴포넌트와 아이프레임이 필요한 경우 사용 | |
9 | 여러 데이터의 중복 선택이 필요한 경우 사용 | |
10 | 여러 데이터 중 1개만 선택해야 하는 경우 사용 | |
11 | 연관된 데이터 세트에서 쉽게 선택할 수 있도록 다단계 분류가 적용된 셀렉트 박스 | |
12 | 여러가지 데이터를 Cascader로 선택해야 하는 경우 사용 | |
13 | 숫자 입력이 필요한 경우 사용 | |
14 | 창을 펼쳐 여러 정보를 확인하고 선택해야 하는 경우 사용 | |
15 | 트리형 데이터를 선택하는 경우 사용 | |
16 | Modal에서 데이터 검색을 하여 선택하는 경우 사용 | |
17 | 비밀번호를 입력받는 경우 사용 | |
18 | 칼라 선택이 필요한 경우 사용 | |
19 | 파일 업로드가 필요한 경우 사용 | |
20 | 이미지 파일 업로드가 필요한 경우 사용 | |
21 | 우편번호 검색 기능을 가진 컴포넌트 | |
22 | 주소를 입력 받는 경우 사용 | |
23 | 지도 입력이 필요한 경우 사용 | |
24 | 날짜 정보를 선택하여 입력해야 하는 경우 사용 | |
25 | 시작 날짜와 종료 날짜를 선택하여 입력 받아야 하는 경우 사용 | |
26 | 시간 정보를 선택하여 입력해야 하는 경우 사용 | |
27 | 시작 시간과 종료 시간을 선택하여 입력 받아야 하는 경우 사용 | |
28 | 미리 정해진 범위 내의 숫자값을 선택하여 입력받는 경우 사용 | |
29 | 평가 정보를 표시해야 하는 경우 사용 | |
30 | 분류 또는 마크업을 위한 태그 지정이 필요한 경우 사용 |
Input Status
입력 컴포넌트의 상태는 아래와 같이 4가지로 표현된다.
Normal | Hover |
|---|---|
Active | Disabled |
Preview
입력 컴포넌트는 입력 타입에 따라 6가지로 분류 할 수 있으며, 컴포넌트가 실제 화면에 출력되는 UI는 다음과 같다.
No | Type | Components |
|---|---|---|
1 | 문자형(String) | AutoComplete, Text, Textarea, TextEditor, Password, Tags |
2 | 선택형(Select) | Boolean, Checkbox, Radio, Cascader, Select |
3 | 삽입형(Insert) | File, Image |
4 | 숫자형(Number) | Number, Rate, Slider, Color |
5 | 날짜/시간형(Date/Time) | Date, DateRange, Time, TimeRange |
6 | 위치형(Place) | Zipcode, Location, Map |
7 | 특수형(Special) | CodeEditor, JsonEditor, Include |
1. String Type
No | Component | Preview |
|---|---|---|
1 | Text | |
2 | Textarea | |
3 | TextEditor | |
4 | Password | |
5 | AutoComplete | |
6 | Tags |
2. Select Type
No | Component | Preview |
|---|---|---|
1 | Boolean | |
2 | Checkbox | |
3 | Radio | |
4 | Cascader | |
5 | CascaderMultiple | |
6 | Select | |
7 | SelectTree | |
8 | SelectModal |
3. Insert Type
No | Component | Preview | |
|---|---|---|---|
1 | File | ||
2 | Image | ||
4. Number Type
No | Component | Preview |
|---|---|---|
1 | Number | |
2 | Rate | |
3 | Slider | |
4 | Color |
5. Date/Time Type
No | Component | Preview |
|---|---|---|
1 | Date | |
2 | DateRange | |
3 | Time | |
4 | TimeRange |
6. Place Type
No | Component | Preview |
|---|---|---|
1 | Zipcode | |
2 | Location | |
3 | Map |
|
7. Special Type
No | Component | Preview |
|---|---|---|
1 | CodeEditor | |
2 | JsonEditor | |
3 | Include |
Common options
입력 컴포넌트는 다음과 같은 공통 옵션을 동일하게 갖는다.
1. Size
컴포넌트의 사이즈 옵션은 Small, Default, Large 3가지로 제공한다.
2. Field Size
필드의 사이즈를 비율로 조절할 수 있다.
3. Fixed Field Size
Laytout > Col 사이즈를 기준으로 배치한 입력 컴포넌트의 필드 사이즈를 비율로 고정할 수 있다.
4. Default Value
디폴트 값을 미리 설정 할 수 있다.
5. Form Reset Value
폼내에서 사용되는 입력 컴포넌트의 리셋 값을 설정 할 수 있다.
6. Disable
컴포넌트의 상태를 Disable로 고정 할 수 있다.
7. Hide Label
컴포넌트 상단에 출력되는 Label을 비노출로 변경 할 수 있다.
8. Next Line Label
라벨의 위치를 컴포넌트 좌측으로 변경 할 수 있다.
9. Placeholder
입력 받을 정보에 대한 부가적인 요청 문구를 출력하는 플레이스홀더 기능을 제공한다. 플레이스홀더 문구는 사용자에 의해 정보가 입력되면 사라진다.
10. Tooltip
라벨 뒤에 표시되는 툴팁 기능을 제공한다.
11. Comment
컴포넌트 하단에 표시되는 코멘트 기능을 제공한다.
tip Required
인풋 컴포넌트의
Required설정은 Platform Console에 있는 스키마에서 진행 한다. 필수값으로 설정된 인풋 컴포넌트는 사용자 입력 시 설정 조건에 따라 경고성 Comment 가 자동 출력 된다.