Cascader UI

Cascader는 사용자가 연관된 데이터 세트에서 데이터를 선택하도록 단계별 데이터 선택 기능을 제공하는 컴포넌트이다. Single 타입의 기본 Cascader와 다중 선택을 위한 Multiple 타입의 CascaderMultiple 컴포넌트 2가지가 있다.

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

1. Basic Type

Cascader 컴포넌트의 기본 UI는 다음과 같다. 입력 필드가 Active 상태로 되면 상위 데이터 목록이 출력되고, 원하는 데이터를 클릭하면 연결 된 하위 데이터 목록이 나타난다. 마지막 단계까지 모두 선택하면, 연관된 데이터 세트 정보가 모두 입력필드에 출력된다.

2. Multiple Type

데이터 다중 선택 기능이 필요하다면 CascaderMultiple 컴포넌트를 사용 할 수 있다. 기본 UI는 다음과 같이 Cascader컴포넌트와 추가버튼()으로 구성되어 있다.

데이터를 선택하고 ^[1]추가 버튼을 클릭하면 CascaderMultiple 컴포넌트 하단에 ^[2]선택한 데이터가 리스트업 된다.

기본적으로 삭제와 드래그앤드랍 정렬 기능을 제공한다.

Function

1. Disable Clear

2. Separator

데이터의 각 단계를 구분짓는 Separator 기호를 직접 입력하여 사용 할 수 있다. 기본 Default는 “/“이다.

3. Popup Visible

데이터 선택 팝업을 항상 고정으로 출력하는 옵션을 제공한다.

4. Show Last Value

선택한 데이터 세트의 마지막 데이터만을 입력 필드에 출력하는 기능이다.

5. Change on select

사용자가 데이터를 선택 할 때 마다 입력필드에 선택한 데이터를 출력해주는 기능이다. 만약 Change on select{OFF} 로 설정하면, child가 없는 leaf data를 선택 할 때에만 입력필드에 데이터가 출력된다.

❗️Use validation for Item depth와 같이 사용 불가능