Headless UI v1.4를 출시했습니다. 이번 버전에는 새로운 Tab 컴포넌트와 Popover, Disclosure 컴포넌트를 더 쉽게 수동으로 닫을 수 있는 새로운 API가 포함되어 있습니다.
탭
올해 초 Tailwind UI Ecommerce 작업을 시작하면서, 우리가 디자인한 새로운 인터페이스를 구축하기 위해 Headless UI에서 탭을 지원해야 한다는 것을 금방 깨달았습니다.
결과적으로 우리가 만든 것은 다음과 같습니다:
import { Tab } from '@headlessui/react'function MyTabs() { return ( <Tab.Group> <Tab.List> <Tab>Tab 1</Tab> <Tab>Tab 2</Tab> <Tab>Tab 3</Tab> </Tab.List> <Tab.Panels> <Tab.Panel>Content 1</Tab.Panel> <Tab.Panel>Content 2</Tab.Panel> <Tab.Panel>Content 3</Tab.Panel> </Tab.Panels> </Tab.Group> )}네, 이게 바로 탭입니다!
다른 모든 Headless UI 컴포넌트와 마찬가지로, 이 컴포넌트는 키보드 네비게이션과 같은 기능을 완전히 추상화하여 여러분이 까다로운 접근성 세부 사항을 고민하지 않고도 완전히 선언적인 방식으로 커스텀 탭을 만들 수 있게 해줍니다.
문서를 확인해 보세요 더 많은 정보를 얻을 수 있습니다.
Disclosure와 Popover 닫기
지금까지는 Disclosure를 닫기 위해 열 때 사용한 버튼을 클릭하는 방법밖에 없었습니다. 일반적인 Disclosure 사용 사례에서는 큰 문제가 아니지만, 모바일 네비게이션과 같은 경우에는 내부 링크를 클릭할 때 닫히는 것이 더 적합할 때가 많습니다.
이제 Disclosure.Button(또는 Vue에서는 DisclosureButton)을 사용해 패널 내부에서 패널을 닫을 수 있습니다. 이를 통해 링크나 다른 버튼을 쉽게 감싸서 패널이 열린 상태로 유지되지 않도록 할 수 있습니다:
import { Disclosure } from '@headlessui/react'import MyLink from './MyLink'function MyDisclosure() { return ( <Disclosure> <Disclosure.Button>Open mobile menu</Disclosure.Button> <Disclosure.Panel> <Disclosure.Button as={MyLink} href="/home"> Home </Disclosure.Button> {/* ... */} </Disclosure.Panel> </Disclosure> )}Popover 컴포넌트에서도 동일하게 작동합니다:
import { Popover } from '@headlessui/react'import MyLink from './MyLink'function MyPopover() { return ( <Popover> <Popover.Button>Solutions</Popover.Button> <Popover.Panel> <Popover.Button as={MyLink} href="/insights"> Insights </Popover.Button> {/* ... */} </Popover.Panel> </Popover> )}더 세밀한 제어가 필요하다면, render prop/scoped slot을 통해 close 함수를 전달하므로 필요할 때 명령적으로 패널을 닫을 수 있습니다:
import { Popover } from '@headlessui/react'function MyPopover() { return ( <Popover> <Popover.Button>Terms</Popover.Button> <Popover.Panel> {({ close }) => ( <button onClick={async () => { await fetch('/accept-terms', { method: 'POST' }) close() }} > Read and accept </button> )} </Popover.Panel> </Popover> )}더 자세한 내용은 업데이트된 Popover 및 Disclosure 문서를 참고하세요.
직접 해보기
Headless UI v1.4는 사소한 업데이트이므로 주요 변경 사항은 없습니다. 업그레이드하려면 npm을 통해 최신 버전을 설치하세요:
# React용npm install @headlessui/react# Vue용npm install @headlessui/vue최신 문서는 공식 웹사이트에서 확인할 수 있습니다. 다양한 스타일 예제를 살펴보고 싶다면 Tailwind UI를 방문해 보세요.
시도해 볼 준비가 되셨나요? Headless UI 웹사이트 방문 →