AutoComplete

자동완성 기능을 제공하는 입력필드 AutoComplete 컴포넌트의 기본 스타일은 다음과 같다. 특정 검색어를 입력하면, 해당 문자가 포함된 데이터가 자동으로 하단에 리스트업 되어 사용자가 원하는 데이터를 빠르게 선택 할 수 있다.

EX 문자 “S” 입력 > 해당 문자가 포함된 testS 데이터 자동 출력

Basic

기본 UI는 미리 데이터가 셋팅 된 입력필드이다. 상단 라벨 표시는 Hidden Label 옵션을 사용하여 숨김 처리 할 수 있으며, Disable 옵션을 설정하여 비활성화 상태로 사용 할 수 있다.

Active First Value

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

Width

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

Disable Clear

Clear 아이콘을 사용하지 않을 수 있다.

EX Allow Clear{OFF}

Exclude Items

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

Addon Create Button

AutoComplete 컴포넌트의 셋팅 데이터를 바로 Create 할 수 있는 버튼 사용 여부를 설정 할 수 있다.

• Show Addon Create Button

  • Addon Create Button Label : 버튼 라벨 설정

  • Create Page Type : 클릭 시 오픈 할 페이지 타입 선택(Modal, Page, Window)

  • Create Page : 연결하고자 하는 path 선택 또는 직접 입력

Addon Search Button

사용자가 셋팅 데이터를 Detail하게 확인하고 선택해야하는 경우 검색 버튼 옵션을 활용 할 수 있다. 아래 화면과 같이 검색 버튼을 클릭하면, 데이터 상세 내용을 확인 할 수 있는 테이블 리스트가 Modal로 출력된다.

• Show Addon Search Button

  • Addon Search Button Label : 버튼 라벨 설정

  • Search Page Type : 클릭 시 오픈 할 페이지 타입 선택 - Modal

    • Modal Render Type : 모달 렌더 타입 선택(Page, Components)

    • Modal Page : 모달로 연결 할 path 선택 또는 직접 입력