사용자가 데이터 목록을 확인하고 선택하는 경우 사용 되는 컴포넌트이다.
( 참고: https://ionsdp.atlassian.net/wiki/spaces/ICE4P/pages/1543733287/Input+Component#Common-options )
Basic
셀렉트의 기본 UI는 다음과 같다. 사용자가 입력 필드를 클릭하여 Active 상태가 되면 데이터 옵션 목록이 출력된다. Hidden Label 옵션으로 라벨 없이 사용이 가능하며, Disable 옵션을 설정하여 비활성화 상태로 사용 할 수도 있다.
Active First Value
미리 셋팅 된 데이터 목록에서 첫 번째 값을 Default로 설정 할 수 있다.
Width
필드의 기본 넓이와 Min Width 와 Max Width 를 직접 입력하여 설정 할 수 있다.
Disable Search & Clear
입력 필드에 문자 입력 시 자동으로 해당 문자가 포함된 데이터를 검색해주는 Search 기능을 OFF 하거나, Clear 아이콘을 사용하지 않을 수 있다.
Disable Search{ON}, Disable Clear{ON}
Exclude Items
이미 셋팅 해 놓은 데이터 선택 목록에서 제외하고 싶은 데이터가 있다면 Exclude Items 옵션에서 아래와 같이 직접 선택하여 제외 시킬 수 있다.
Addon Button
Select 컴포넌트에서 사용 가능한 Addon Button은 총 3가지가 있다. 첫번째는 셋팅 데이터를 바로 [1]Create 할 수 있는 버튼이고, 두번째는 [2]Update/View 기능의 아이콘 버튼이다. 적용한 화면은 다음과 같다.
#Addon Create Button 옵션 상세
Addon Create Button Label : 버튼 라벨 설정
Create Page Type : 클릭 시 오픈 할 페이지 타입 선택(
Modal,Page,Window)Create Page : 연결하고자 하는 path 선택 또는 직접 입력
#Addon Update/View Button 옵션 상세
Addon Update/View Button Label : 버튼 라벨 설정
Update/View Page Type : 클릭 시 오픈 할 페이지 타입 선택(
Modal,Page,Window)Update/View Page : 연결하고자 하는 path 선택 또는 직접 입력
마지막은 데이터를 상세 조회 하며 검색 할 수 있는 [3]Search 버튼이다. 적용한 화면은 다음과 같으며, 검색 버튼 클릭 시 연결된 데이터 정보 목록이 Modal로 출력된다.
#Addon Search Button 옵션 상세
Addon Search Button Label : 버튼 라벨 설정
Search Page Type : 클릭 시 오픈 할 페이지 타입(
Modal)
Addon Component Type
사용자가 선택한 데이터 값의 상세 내용을 Select 컴포넌트 하단에 Form 또는 Card 컴포넌트로 출력 할 수 있다. 만약 Form 컴포넌트를 선택한다면, Update Form 이나 View 타입으로 상세 설정 할 수 있다.
