분류 또는 마크업을 위해 사용되는 Tags 컴포넌트의 기본 UI는 다음과 같다.

( 참고: https://ionsdp.atlassian.net/wiki/spaces/ICE4P/pages/1543733287/Input+Component#Common-options )

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

Function

1. Closable

태그 컴포넌트는 기본적으로 Closable{ON} 으로 생성된다. 사용자가 [x] 클릭 시 태그를 닫을 수 있다. 만약 사용자가 태그를 지울 수 없도록 제한을 두어야 한다면 Closable{OFF}로 설정한다.

2. Checkable

태그를 Checkable{ON} 상태로 설정하면, 사용자가 클릭할 때마다 체크 된 상태가 ON/OFF 로 전환된다.

3. Use Visible Button

태그 Display를 ON/OFF 할 수 있는 토글 버튼을 사용해야 한다면 Visible{ON} 으로 설정하면 된다.

4. Use Create Button

사용자가 실시간으로 태그를 생성 할 수 있는 Dynamic Create 기능을 제공한다.

• Dynamic Create : 신규 태그 생성 버튼

  • Create Button Position : 버튼 위치 설정(Top, Right, Bottom, Left)

5. Animate Effect

태그를 Close[x] 또는 Create 할 경우 기본적인 애니메이션 효과를 사용 할 수 있다. ( https://ant.design/components/tag/#components-tag-demo-animation )