Basic UI

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

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

...

Style

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

1. Color/Border

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

...

2. Icon Tag

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

...

• 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}로 설정한다.

...

태그를 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

...