Headless UI v1.5를 출시했습니다. 이번 버전에는 새로운 Combobox 컴포넌트가 포함되어 있습니다. 콤보박스는 선택 컨트롤과 비슷하지만 자동 완성/타이핑 기능이 추가된 형태입니다. 대규모 데이터셋을 다루고 빠르게 옵션을 필터링해야 할 때 일반 선택 박스 대신 사용하기에 적합합니다.
다른 Headless UI 컴포넌트와 마찬가지로, 콤보박스는 복잡한 접근성 고려 사항을 추상화하지만 스타일링은 완전히 여러분에게 맡깁니다. 키보드 네비게이션이나 스크린 리더 지원과 같은 문제를 걱정하지 않고 원하는 대로 콤보박스를 디자인할 수 있습니다.
실제 동작을 확인하고 싶다면 간단한 데모를 살펴보세요:
결과를 필터링하는 부분은 여러분이 완전히 제어할 수 있도록 설계했습니다. 기본 문자열 비교를 사용하거나, Fuse.js와 같은 퍼지 검색 라이브러리를 사용하거나, 심지어 API에 서버 측 요청을 보내는 것도 가능합니다. 프로젝트에 맞는 방식을 선택하면 됩니다.
기본 문자열 비교를 사용해 결과를 필터링하는 예제를 살펴보겠습니다:
import { useState } from 'react'import { Combobox } from '@headlessui/react'const people = [ 'Wade Cooper', 'Arlene McCoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt',]function MyCombobox() { const [selectedPerson, setSelectedPerson] = useState(people[0]) const [query, setQuery] = useState('') const filteredPeople = query === '' ? people : people.filter((person) => { return person.toLowerCase().includes(query.toLowerCase()) }) return ( <Combobox value={selectedPerson} onChange={setSelectedPerson}> <Combobox.Input onChange={(event) => setQuery(event.target.value)} /> <Combobox.Options> {filteredPeople.map((person) => ( <Combobox.Option key={person} value={person}> {person} </Combobox.Option> ))} </Combobox.Options> </Combobox> )}Command palettes
콤보박스는 단독 입력 필드로도 유용하지만, 더 복잡한 컴포넌트를 구축하기 위한 기본 요소로도 활용할 수 있습니다. 예를 들어, 커맨드 팔레트를 만들 때 유용하게 사용할 수 있습니다.
사실, 이게 바로 우리가 콤보박스 컴포넌트를 만든 이유 중 하나입니다. Tailwind UI에 새로운 커맨드 팔레트 카테고리를 추가하고 싶었고, 이를 구현하기 위해 이 컴포넌트가 필요했습니다.
Tailwind UI 라이선스를 가지고 있다면, 새로운 Command Palettes 카테고리를 확인해 보세요. 그리고 궁금하다면, 새로운 Comboboxes 카테고리도 추가했으니 살펴보세요.
새로운 커맨드 팔레트에 대한 열정을 이어가며, Tailwind CSS, React, 그리고 Headless UI를 사용해 커맨드 팔레트를 처음부터 구축하는 방법에 대한 심층 스크린캐스트도 최근에 공개했습니다.
이 영상에서는 디자인과 애니메이션을 완벽하게 구현하기 위한 다양한 Tailwind 트릭을 다루며, 새로운 콤보박스 컴포넌트를 사용하고 앱에 연결하는 방법에 대해 많은 것을 배울 수 있습니다.
직접 해보기
프로젝트에 이미 Headless UI가 설치되어 있다면, 새로운 Combobox 컴포넌트를 사용하려면 v1.5로 업그레이드하세요. 이번 업데이트는 마이너 버전이므로 기존 기능에 영향을 주는 변경 사항은 없습니다.
# React용npm install @headlessui/react# Vue용npm install @headlessui/vue최신 문서는 공식 웹사이트에서 확인하세요.