Basic UI

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

Function

태그 출력 Max값을 숫자로 직접 입력하여 설정 할 수 있다.

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

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

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

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

Dynamic Create : 신규 태그 생성 버튼
- Create Button Position : 버튼 위치 설정(Top, Right, Bottom, Left)

Dynamic Create{ON}, Create Button Position{Left}

Dynamic Create{ON}, Create Button Position{Bottom}

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

컬러와 보더, 아이콘 설정을 통해 다양한 스타일의 태그를 사용 할 수 있다.

Color와 Border 스타일을 태그 개별로 설정하여 사용 할 수 있다.

아이콘을 태그와 함께 사용 할 수 있다.

Show Icon : 아이콘 사용 여부 ON/OFF
- Icon Setting Type : 아이콘 셋팅 타입 선택(Unify, Separate)
  - Select Icon : 셀렉트 박스에서 아이콘 1개 선택
  - Enable Separate Tag Icon : Tag별 아이콘을 Upload하여 설정

5개의 서로 다른 색상의 태그로 특정 상태를 표시 할 수 있도록 제공한다.

→ success, processing, error, default, warning