Checkbox

 

 

 

사용자가 데이터 다중 선택을 할 수 있도록 여러 옵션을 체크박스 형태로 제공하는 컴포넌트이다.

( 참고: Input Component | Common options )

 

 

Basic UI

체크박스의 기본 UI는 다음과 같다. 상단 라벨은 Hidden Label 옵션을 사용하여 숨김 처리 할 수 있으며, Disable 옵션을 설정하여 체크박스를 비활성화 할 수 있다.

 

 

 


Function

1. Active First Value

미리 셋팅 된 데이터 목록에서 첫 번째 값을 Default로 설정 할 수 있다.

 

2. Show Check All

전체 선택 기능의 체크박스를 옵션으로 추가 할 수 있다.

 

 

3. Max Item Count

체크 박스 선택 Max 값을 설정 할 수 있다.

 

 

4. Exclude Items

이미 셋팅 해 놓은 데이터 선택 목록에서 제외하고 싶은 데이터가 있다면 Exclude Items 옵션에서 아래와 같이 직접 선택하여 제외 시킬 수 있다.

 

 

5. Use Grid

그리드 옵션을 사용하여 체크박스 옵션을 나열 할 수 있다.

 

 

6. Addon Multiple Component Type

선택한 데이터를 체크박스 영역 하단에 목록으로 출력하는 기능을 제공한다. 사용자가 데이터를 선택한 순서대로 목록에 리스트업 되며, Sortable 타입으로 옵션을 설정할 경우 선택한 데이터 순번(Order)을 변경 할 수 있다. 추가적으로 Drag Sort 옵션을 사용하여 사용자가 드래그앤드랍 정렬을 할 수 있도록 할 수 있다.

 

ex Type{ Sortable }, Draggable{ON}, Show Order{ON}