| Table of Contents | ||||
|---|---|---|---|---|
|
Basic UI
분류 또는 마크업을 위해 사용되는 Tags 컴포넌트의 기본 UI는 다음과 같다.
( 참고: https://ionsdp.atlassian.net/wiki/spaces/ICE4P/pages/1543733287/Input+Component#Common-options )
...
Style
...
Function
1.
...
Max Item Count
태그 출력 Max값을 숫자로 직접 입력하여 설정 할 수 있다.
...
2
...
.
...
Show Icon : 아이콘 사용 여부 ON/OFF
Icon Setting Type : 아이콘 셋팅 타입 선택(
Unify,Separate)Select Icon : 셀렉트 박스에서 아이콘 1개 선택
Enable Separate Tag Icon : Tag별 아이콘을 Upload하여 설정
3. Status Tag
5개의 서로 다른 색상의 태그로 특정 상태를 표시 할 수 있도록 제공한다.
→ success, processing, error, default, warning
...
Function
...
Closable
태그 컴포넌트는 기본적으로 Closable{ON} 으로 생성된다. 사용자가 [x] 클릭 시 태그를 닫을 수 있다. 만약 사용자가 태그를 지울 수 없도록 제한을 두어야 한다면 Closable{OFF}로 설정한다.
...
...
3. Checkable
태그를 Checkable{ON} 상태로 설정하면, 사용자가 클릭할 때마다 체크 된 상태가 ON/OFF 로 전환된다.
...
...
4. Use Visible Button
태그 Display를 ON/OFF 할 수 있는 토글 버튼을 사용해야 한다면 Visible{ON} 으로 설정하면 된다.
...
...
5. Use Create Button
사용자가 실시간으로 태그를 생성 할 수 있는 Dynamic Create 기능을 제공한다.
...
| Info |
|---|
Dynamic Create{ON}, Create Button Position{Bottom} |
...
...
6. Animate Effect
태그를 Close[x] 또는 Create 할 경우 기본적인 애니메이션 효과를 사용 할 수 있다. ( https://ant.design/components/tag/#components-tag-demo-animation )
...
Style
컬러와 보더, 아이콘 설정을 통해 다양한 스타일의 태그를 사용 할 수 있다.
1. Color/Border
Color와 Border 스타일을 태그 개별로 설정하여 사용 할 수 있다.
...
2. Icon Tag
아이콘을 태그와 함께 사용 할 수 있다.
...
Show Icon : 아이콘 사용 여부 ON/OFF
Icon Setting Type : 아이콘 셋팅 타입 선택(
Unify,Separate)Select Icon : 셀렉트 박스에서 아이콘 1개 선택
Enable Separate Tag Icon : Tag별 아이콘을 Upload하여 설정
3. Status Tag
5개의 서로 다른 색상의 태그로 특정 상태를 표시 할 수 있도록 제공한다.
→ success, processing, error, default, warning
...