Дмитрий
HeadlessUImiddle![Иконка уровня middle](/_next/static/media/bug-middle-icon.cac7dc92.svg)
![Картинка поста Headless UI 2.0: новые компоненты, улучшенное позиционирование и обновленная документация](/_next/image?url=https%3A%2F%2Fcdn-bucket.hb.bizmrg.com%2Fpurple-images%2Fprofile-images%2F49d16d4a-3c6d-46d0-b8ee-6f0ff0b0e2bd.jpg&w=3840&q=75)
Команда разработчиков анонсировала выпуск новой версии Headless UI v2.0 для React. Эта версия знаменует собой важный этап улучшения функциональности библиотеки, предлагая разработчикам более качественный опыт работы и ряд новых, удобных инструментов.
- Встроенное позиционирование якорей:
- Благодаря интеграции Floating UI, компоненты, такие как меню, поповер, комбобокс и листбокс, теперь поддерживают управление позиционированием якорей.
- Используя новый проп
anchor
, можно указать начальное положение якоря и настроить его с помощью CSS-переменных (-anchor-gap
,-anchor-padding
).
- Новый компонент Checkbox:
- Добавлен новый компонент Checkbox для создания настраиваемых флажков.
- Поддерживает синхронизацию состояния с скрытым
<input>
, что позволяет легко использовать его в формах.
- HTML-компоненты для работы с формами:
- Теперь создание интуитивно понятных и доступных форм стало проще благодаря новым компонентам, оборачивающим стандартные HTML-элементы.
- Например, компонент
Field
автоматически генерирует необходимыеaria-*
атрибуты.
- Улучшенное определение состояний:
- Используя возможности библиотеки React Aria, новые атрибуты
data-*
(например,data-active
,data-hover
,data-focus
) заменяют стандартные псевдоклассы. - Эти атрибуты дают более надежные и кросс-браузерные состояния.
- Используя возможности библиотеки React Aria, новые атрибуты
- Виртуализация списка в Combobox:
- Интеграция с TanStack Virtual обеспечивает поддержку виртуализации для списков в Combobox.
- Это позволяет работать даже с тысячами элементов, оптимизируя производительность.
- Новый сайт и улучшенная документация:
- Новый сайт предлагает обновленный дизайн и значительно улучшенную документацию по каждому из компонентов.
Заключение
В этой версии Headless UI разработчики сделали большой шаг вперед, предоставив новые инструменты для удобного управления якорями, создания форм, определения состояний и работы с большими списками. Убедитесь, что вы обновили библиотеку до версии 2.0 и воспользуйтесь этими новыми возможностями!
Карта развития разработчика
Получите полную карту развития разработчика по всем направлениям: frontend, backend, devops, mobile
Комментарии
0