Table of Contents |
---|
폼(Form)은 사용자가 정보를 입력하거나 선택 할 수 있도록, 다양한 컨트롤 엘리먼트(control elements) 들로 컴포넌트로 구성되어있다. 데이터 범위 관리 기능, 데이터 수집, 검증 및 스타일 기능을 포함하고 있다.
사용 패턴
폼(Form)이 사용되는 페이지 패턴은 6가지로 구분 할 수 있다.
...
No
...
Patterns
...
Description
...
1
...
Single Form
...
기본적인 단일 입력폼 (
Status | ||||
---|---|---|---|---|
|
...
2
...
List-Form
...
리스트 목록과 함께 사용하는 입력폼
...
3
...
Tree-Form
...
트리 목록과 함께 사용하는 입력폼
...
4
...
Tab-Form
...
다양한 입력폼을 탭으로 구분한 형태
...
5
...
Steps-Form
...
단계별 사용자 입력을 유도하는 입력폼
...
6
...
Form in Modal
...
버튼 클릭 시 Modal 형태로 출력되는 입력폼
...
구성 요소
...
컴포넌트
데이터 타입에 따라 적용 할 수 있는 컴포넌트 종류는 상이하다. PropertyType
No | Value Type | Component Options |
---|---|---|
1 | Integer | Number, Rate, Slider |
2 | String | Color, DateRange, Password, Slider, Tags, Text, Textarea, TextEditor |
3 | Text | CodeEditor, JsonEditor, Text, Textarea, TextEditor |
4 | Date | Date, BirthDate, DateRange, DateTime, DateTimeRange |
5 | File/Image | File, Image, ImageEditor |
6 | Reference | AutoComplete, Radio, Select, Cascader, Checkbox, Transfer… |
7 | boolean | Switch |
폼(Form)에 사용되는 컴포넌트는 다음과 같다.
No | Elements | Description |
---|---|---|
1 | Text Input | |
2 | Number Input | |
3 | Textarea | |
4 | Select | |
5 | Select-Multiple | |
6 | Switch | |
7 | Slider | |
8 | Radio | |
9 | Checkbox | |
10 | Rate | |
11 | Upload | |
12 | Dragger | |
Date | ||
12 | Buttons |
데이터 타입과 사용 목적에 따라 사용 할 수 있는 컴포넌트는 상이하다.
...
...
UI 유형
폼(Form)의 유형은 5가지로 구분한다.
...