...
No | Component | Description |
---|
1 | Boolean | ![](https://ionsdp.atlassian.net/wiki/download/thumbnails/1543733287/image-20210611-084234.png?version=1&modificationDate=1623400957926&cacheVersion=1&api=v2&width=102) true ,false 데이터를 처리 할 경우 사용 (ex. 토글, 단일 체크박스, Y/N 버튼) |
2 | AutoComplete | ![](https://ionsdp.atlassian.net/wiki/download/thumbnails/1543733287/image-20210611-081727.png?version=1&modificationDate=1623399450358&cacheVersion=1&api=v2&width=102) 입력 필드의 자동 완성 기능이 필요한 경우 사용 |
3 | Text Input | ![](https://ionsdp.atlassian.net/wiki/download/thumbnails/1543733287/image-20210611-084344.png?version=1&modificationDate=1623401027409&cacheVersion=1&api=v2&width=102) 텍스트 정보를 입력 받을 경우 사용 |
4 | Textarea | ![](https://ionsdp.atlassian.net/wiki/download/thumbnails/1543733287/image-20210611-084411.png?version=1&modificationDate=1623401054158&cacheVersion=1&api=v2&width=102) 멀티 라인 텍스트 인풋 박스로 긴 텍스트 입력이 필요 할 경우 사용 |
5 | TextEditor | ![](https://ionsdp.atlassian.net/wiki/download/thumbnails/1543733287/image-20210611-084438.png?version=1&modificationDate=1623401081297&cacheVersion=1&api=v2&width=102) 텍스트, 이미지, 영상, 표, 목록, 라인, 에디팅 편집 기능이 필요한 경우 사용 |
6 | CodeEditor | ![](https://ionsdp.atlassian.net/wiki/download/thumbnails/1543733287/image-20210611-100551.png?version=1&modificationDate=1623405954473&cacheVersion=1&api=v2&width=102) 코딩 기능이 필요한 경우 사용 |
7 | JsonEditor | ![](https://ionsdp.atlassian.net/wiki/download/thumbnails/1543733287/image-20210611-100655.png?version=1&modificationDate=1623406017791&cacheVersion=1&api=v2&width=102) 코딩 기능 중 Json이 필요한 경우 사용 |
8 | Include | Include Type으로 컴포넌트와 아이프레임이 필요한 경우 사용 |
9 | Checkbox | ![](https://ionsdp.atlassian.net/wiki/download/thumbnails/1543733287/noun_Checkbox_498506.png?version=1&modificationDate=1615959769303&cacheVersion=1&api=v2&width=102) 여러 데이터의 중복 선택이 필요한 경우 사용 |
10 | Radio | ![](https://ionsdp.atlassian.net/wiki/download/thumbnails/1543733287/noun_radio%20button_768840.png?version=1&modificationDate=1615959886737&cacheVersion=1&api=v2&width=102) 여러 데이터 중 1개만 선택해야 하는 경우 사용 |
11 | Cascader | ![](https://ionsdp.atlassian.net/wiki/download/thumbnails/1543733287/image-20210611-082112.png?version=1&modificationDate=1623399675589&cacheVersion=1&api=v2&width=102) 연관된 데이터 세트에서 쉽게 선택할 수 있도록 다단계 분류가 적용된 셀렉트 박스 |
12 | CascaderMultiple | 여러가지 데이터를 Cascader로 선택해야 하는 경우 사용 |
13 | Number | ![](https://ionsdp.atlassian.net/wiki/download/thumbnails/1543733287/image-20210611-101659.png?version=1&modificationDate=1623406621704&cacheVersion=1&api=v2&width=102) 숫자 입력이 필요한 경우 사용 |
14 | Select | ![](https://ionsdp.atlassian.net/wiki/download/thumbnails/1543733287/image-20210611-084641.png?version=1&modificationDate=1623401204141&cacheVersion=1&api=v2&width=102) 창을 펼쳐 여러 정보를 확인하고 선택해야 하는 경우 사용 |
15 | SelectTree | 트리형 데이터를 선택하는 경우 사용 |
16 | SelectModal | Modal에서 데이터 검색을 하여 선택하는 경우 사용 |
17 | Password | 비밀번호를 입력받는 경우 사용 |
18 | Color | 칼라 선택이 필요한 경우 사용 |
19 | File | 파일 업로드가 필요한 경우 사용 |
20 | Image | 이미지 파일 업로드가 필요한 경우 사용 |
21 | Zipcode | 우편번호 검색 기능을 가진 컴포넌트 |
22 | Location | 주소를 입력 받는 경우 사용 |
23 | Map | |
24 | GoogleMap | |
25 | Date | ![](https://ionsdp.atlassian.net/wiki/download/thumbnails/1543733287/noun_Calendar_604383.png?version=1&modificationDate=1615963858505&cacheVersion=1&api=v2&width=102) 날짜 정보를 선택하여 입력해야 하는 경우 사용 |
26 | Date Range | 시작 날짜와 종료 날짜를 선택하여 입력 받아야 하는 경우 사용 |
27 | Time | ![](https://ionsdp.atlassian.net/wiki/download/thumbnails/1543733287/noun_Time_2452973.png?version=1&modificationDate=1615963956562&cacheVersion=1&api=v2&width=102) 시간 정보를 선택하여 입력해야 하는 경우 사용 |
28 | Time Range | 시작 시간과 종료 시간을 선택하여 입력 받아야 하는 경우 사용 |
29 | Slider | 미리 정해진 범위 내의 숫자값을 선택하여 입력받는 경우 사용 |
30 | Rate | ![](https://ionsdp.atlassian.net/wiki/download/thumbnails/1543733287/noun_rate_106674.png?version=1&modificationDate=1615964102583&cacheVersion=1&api=v2&width=102) 평가 정보를 표시해야 하는 경우 사용 |
31 | Tags | 분류 또는 마크업을 위한 태그 지정이 필요한 경우 사용 |
32 | HistoryTable | 컨테이너와 차이 확인 필요 |
...
Status Information
입력 컴포넌트의 상태는 아래와 같이 4가지로 표현된다.
Normal | Hover |
---|
Image Added | Image Added |
Active | Disabled |
---|
Image Added | Image Added |
...
Preview
입력 컴포넌트는 입력 타입에 따라 6가지로 분류 할 수 있으며, 컴포넌트가 실제 화면에 출력되는 UI는 다음과 같다.
...
No | Component | Preview |
---|
1 | Number Input | ![](https://ionsdp.atlassian.net/wiki/download/attachments/1543733287/image-20210615-050422.png?version=1&modificationDate=1623733465060&cacheVersion=1&api=v2) |
2 | Rate | ![](https://ionsdp.atlassian.net/wiki/download/attachments/1543733287/image-20210615-050454.png?version=1&modificationDate=1623733497054&cacheVersion=1&api=v2) |
3 | Slider | ![](https://ionsdp.atlassian.net/wiki/download/attachments/1543733287/image-20210615-050516.png?version=1&modificationDate=1623733518518&cacheVersion=1&api=v2) |
4 | Color | ![](https://ionsdp.atlassian.net/wiki/download/attachments/1543733287/image-20210615-061328.png?version=1&modificationDate=1623737611715&cacheVersion=1&api=v2) Image Removed Image Added |
5. Date/Time Type
...
No | Component | Preview |
---|
1 | CodeEditor | ![](https://ionsdp.atlassian.net/wiki/download/attachments/1543733287/image-20210615-055539.png?version=1&modificationDate=1623736541225&cacheVersion=1&api=v2) |
2 | JsonEditor | ![](https://ionsdp.atlassian.net/wiki/download/attachments/1543733287/image-20210615-055656.png?version=1&modificationDate=1623736618270&cacheVersion=1&api=v2) |
3 | Include | ![](https://ionsdp.atlassian.net/wiki/download/attachments/1543733287/image-20210615-060127.png?version=1&modificationDate=1623736889275&cacheVersion=1&api=v2) |
Status Information
입력 컴포넌트의 상태는 아래와 같이 4가지로 표현된다.
Normal | Hover |
---|
Image Removed | Image Removed |
Active | Disabled |
---|
Image Removed | Image Removed |
...
Common options
...