Tokenizer

개요

Tokenizer 컴포넌트는 입력 필드에서 여러 개의 값을 동시에 처리하고 관리할 수 있도록 도와주는 컴포넌트입니다. 사용자가 값을 입력할 때마다 각 항목이 개별 "토큰"으로 분리되어 컬렉션 형태로 관리됩니다. 이메일 주소 입력, 태그 입력, 수신자 목록 관리 등 여러 개의 값을 한 번에 입력하고 관리해야 하는 상황에서 유용하게 활용됩니다.

주요 기능

1. 커스텀 렌더러

제안목록의 각 항목을 사용자가 원하는 형태로 렌더링할 수 있습니다. 텍스트, 이미지, 버튼 등을 자유롭게 조합하여 항목을 표현할 수 있습니다.

관련 항목 보기

• 속성

  suggestSource, label, labelField, minChar

---

2. 제안 목록 상태 처리

추천 목록 로딩 중 또는 데이터가 없을 때의 상태를 시각적으로 표시하여 사용자 경험을 개선합니다.

관련 항목 보기

• 속성

  suggestSource, labelField, minChar

---

3. 제안 목록 설정

입력된 텍스트와 관련된 추천 목록을 구성하는 로직을 사용자 정의하여 다양한 추천 기준을 적용할 수 있습니다. (예:API 호출, 로컬 데이터 필터링 등)

관련 항목 보기

• 속성

  label, suggestSource,labelField

---

4. label, placeholder:

입력 필드에 label과 placeholder를 설정하여 사용자에게 입력 목적과 형식을 명확하게 안내합니다.

관련 항목 보기

• 속성

  label, placeholder, suggestSource, minChar

---

5. 최소 문자열 지정

사용자가 너무 짧은 단어를 입력했을 때 불필요한 추천이 뜨지 않도록, 몇 글자 이상 입력해야 추천이 시작될지 설정할 수 있습니다.

관련 항목 보기

• 속성

  suggestSource, labelField, minChar

Minimum characters

2

Please enter at least 2 characters.

---

6. 제안 목록 컨테이너 제어

추천 목록 컨테이너의 자동 및 수동 닫기 기능을 제공하여 사용자가 편리하게 추천 목록을 관리할 수 있도록 합니다.

관련 항목 보기

• 속성

  label, suggestSource, labelField, clearable

Close the suggest when an item is selected.

Close the suggest when it loses focus.

Close the suggest when clicking outside.

---

7. 토큰 생성및 삭제

사용자가 입력한 값 또는 제안 목록에서 선택한 값을 기반으로 토큰을 생성하고, 생성된 토큰은 컬렉션 형태로 관리됩니다. 또한, 필요에 따라 개별 토큰을 삭제하거나 전체 토큰을 초기화하는 기능을 제공합니다.

관련 항목 보기

• 속성

  label, suggestSource, labelField, clearable, allowInputValue, delimiterOnKeys