사용자가 데이터 목록을 확인하고 선택하는 경우 사용 되는 컴포넌트이다.

( 참고: Input Component | Common options )

Basic UI

셀렉트의 기본 UI는 다음과 같다. 사용자가 입력 필드를 클릭하여 Active 상태가 되면 데이터 옵션 목록이 출력된다. Hidden Label 옵션으로 라벨 없이 사용이 가능하며, Disable 옵션을 설정하여 비활성화 상태로 사용 할 수도 있다.

Open

Function

1. Active First Value

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

Open

2. Width

필드의 기본 넓이와 Min Width 와 Max Width 를 직접 입력하여 설정 할 수 있다.

3. Disable Search & Clear

입력 필드에 문자 입력 시 자동으로 해당 문자가 포함된 데이터를 검색해주는 Search 기능을 OFF 하거나, Clear 아이콘을 사용하지 않을 수 있다.

4. Exclude Items

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

5. 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)

6. Addon Component Type

사용자가 선택한 데이터 값의 상세 내용을 Select 컴포넌트 하단에 Form 또는 Card 컴포넌트로 출력 할 수 있다. 만약 Form 컴포넌트를 선택한다면, Update Form 이나 View 타입으로 상세 설정 할 수 있다.