| Table of Contents |
|---|
...
기본 컴포넌트
기본 컴포넌트는 데이터에 대한 목적에 따라 다음과 같이 5가지로 분류한다. 기본적인 컴포넌트는 사용자가 혼락스럽지 않도록 기존에 사용해왔던 형태를 그대로 따르도록 한다.
데이터 입력(InputData Entry)
데이터 출력(OutputData Display)
데이터 탐색(Navigation)
데이터 검색(Search)
데이터 정보(Information)
...
No | Component | Description | ||||||
|---|---|---|---|---|---|---|---|---|
1 | Text Field |   텍스트 정보를 입력 받을 경우 사용
| ||||||
2 | Checkbox |   여러 요소의 중복 선택이 필요한 경우 사용 | ||||||
3 | Radio |   여러 요소 중 1개만 선택해야 하는 경우 사용 | ||||||
4 | DropdownSelect |   창을 펼쳐 여러 정보를 확인하고 선택해야 하는 경우 사용
| ||||||
5 | Buttons |   사용자의 결정에 대한 정보를 입력 받을 경우 사용 | ||||||
6 | ToggleSwitch |   특정 상태를 ON/OFF 할 경우 사용
| ||||||
7 | DatePicker |  https://ant.design/components/date-picker/
| ||||||
8 | TimePicker |  | ||||||
9 | Transfer |  | ||||||
10 | Rate |  |
...
1. 텍스트 필드
사용자가 문자와 숫자를 입력할 수 있는 가장 기본적인 입력 컨트롤이다. 사용자 이름, 이메일주소, 전화번호, 비밀번호와 같은 일반적인 정보부터 상품 금액, 계좌번호, 가격 정보 등 상세한 정보 수집이 필요한 상황에서 범주화 할 수 없는 정보 입력을 요청해야 할 경우 주로 사용된다.
...
1 | 필드 라벨 | 입력 필드에 입력 할 정보가 무엇인지 제목 표시 |
2 | 입력 필드 | 라벨 하단에 있는 텍스트 입력 영역으로, 입력 정보를 실시간으로 출력 |
3 | 플레이스 홀더 텍스트 | 입력 받을 정보에 대한 부가적인 요청 문구로 정보가 입력되면 사라짐 |
4 | 입력 텍스트 | 사용자가 입력 필드에 작성한 텍스트 |
5 | 커서(Cursor) | 사용자에 의해 입력된 텍스트의 필드 내의 현재 입력 위치 표시 |
6 | 클리어 버튼 | 필드에 입력한 정보를 한번에 삭제 |
7 | 도움말 텍스트 | 사용자가 정보 입력 중 필드 하단에 노출되는 도움말 문구 |
8 | 툴팁 | 물음표 아이콘이 라벨 옆에 출력되며, 마우스 오버시 출력되는 안내 문구 |
9 | 아이콘 |
2. 체크박스
3. 라디오 버튼
4.
...
셀렉트 박스
드롭다운 메뉴와 드롭다운 리스트 2가지 타입으로 구분된다.
...