| Table of Contents |
|---|
...
정보를 입력할 때 사용 하는 컴포넌트이다. 사용자가 입력 또는 선택하는 정보의 종류에 따라 아래와 같이 총 6개의 12개의 컴포넌트를 사용 할 수 있다.
...
| Status | ||||
|---|---|---|---|---|
|
명칭 및 종류 확인 필요 : Text, TextArea, TextEditor~ 그냥 Text만 입력하는 컴포넌트와 헷갈릴 수 있음으로 Text Field로 변경
| Status | ||||
|---|---|---|---|---|
|
종류 확인 필요: Select, SelectModal, SelectTree
...
| Status | ||||
|---|---|---|---|---|
|
종류 확인 필요 : Date BirthDate DateRange DateTime DateTimeRange
...
https://ant.design/components/rate/
1. 텍스트 필드
사용자가 문자와 숫자를 입력할 수 있는 가장 기본적인 입력 컨트롤이다. 사용자 이름, 이메일주소, 전화번호, 비밀번호와 같은 일반적인 정보부터 상품 금액, 계좌번호, 가격 정보 등 상세한 정보 수집이 필요한 상황에서 범주화 할 수 없는 정보 입력을 요청해야 할 경우 주로 사용된다.
텍스트 필드의 기본 구조는 다음과 같다.
...
1
...
필드 라벨
...
입력 필드에 입력 할 정보가 무엇인지 제목 표시
...
2
...
입력 필드
...
라벨 하단에 있는 텍스트 입력 영역으로, 입력 정보를 실시간으로 출력
...
3
...
플레이스 홀더 텍스트
...
입력 받을 정보에 대한 부가적인 요청 문구로 정보가 입력되면 사라짐
...
4
...
입력 텍스트
...
사용자가 입력 필드에 작성한 텍스트
...
5
...
커서(Cursor)
...
사용자에 의해 입력된 텍스트의 필드 내의 현재 입력 위치 표시
...
6
...
클리어 버튼
...
필드에 입력한 정보를 한번에 삭제
...
7
...
도움말 텍스트
...
사용자가 정보 입력 중 필드 하단에 노출되는 도움말 문구
...
8
...
툴팁
...
물음표 아이콘이 라벨 옆에 출력되며, 마우스 오버시 출력되는 안내 문구
...
9
...
아이콘
2. 체크박스
3. 라디오 버튼
4. 셀렉트 박스
드롭다운 메뉴와 드롭다운 리스트 2가지 타입으로 구분된다.
| Status | ||||
|---|---|---|---|---|
|
...
Normal
...
Hover
...
Activated
...
Focused
...
Selected
...
Disabled
5. 버튼
| Status | ||||
|---|---|---|---|---|
|
...
Inactive
...
Focus
...
Hover
...
Active
...
Loading
...
Disabled
...
...
[02] 데이터 출력
...
[03] 데이터 탐색
...
[04] 데이터 검색
...