В Tailwind Plus есть множество блоков пользовательского интерфейса, которым для полноценной работы необходим JavaScript, например, диалоговые окна, выпадающие списки, палитры команд и многое другое. И если вы не пользуетесь React или Vue, использование этих блоков раньше означало, что весь этот сложный JavaScript вам придется писать самостоятельно.
Что ж, сегодня всё наконец меняется: каждый блок интерфейса в Tailwind Plus теперь полностью функционален, доступен и интерактивен, включая примеры на обычном HTML.
Теперь вы можете использовать любые выпадающие списки, палитры команд, диалоговые окна, панели и многое другое в любом проекте, над которым работаете — без использования фреймворков JavaScript.
Никаких фреймворков не требуется
Чтобы этого добиться, мы создали @tailwindplus/elements — библиотеку, которую мы выпускаем эксклюзивно для клиентов Tailwind Plus.
Elements — это коллекция Headless-пользовательских элементов, которые объединяют в себе всё сложное поведение, необходимое для создания интерактивных пользовательских интерфейсов с помощью одного лишь HTML, и могут быть оформлены любым удобным способом с использованием utility-классов или кастомного CSS.
Вместо привязки к конкретному JavaScript-фреймворку эти пользовательские элементы работают везде, где можно использовать тег <script>:
index.html
Вот как выглядит создание кастомного выпадающего меню с помощью Elements:
А вот как выглядит создание кастомного элемента select:
Видите эти пользовательские HTML-элементы, такие как <el-select> и <el-options>? Это секретный ингредиент, который заставляет всё работать, включая автоматическое управление атрибутами ARIA, обработку фокуса, поддержку клавиатуры и многое другое.
С помощью Elements вы можете создать даже такой сложный компонент, как кастомная палитра команд, не написав при этом ни строчки собственного JavaScript:
Для поддержки всех блоков интерфейса в Tailwind Plus в этом первом релизе Elements мы поставляем следующие примитивы:
- Autocomplete — для создания таких компонентов, как кастомные комбинированные списки (Combobox).
- Command palette — для создания кастомных палитр команд.
- Dialog — для создания кастомных модальных окон, выдвижных панелей и многого другого.
- Disclosure — для создания сворачиваемых блоков FAQ, мобильных меню в навигационных панелях и многого другого.
- Dropdown menu — разумеется, для создания кастомных выпадающих меню.
- Popover — для создания кастомных всплывающих окон и многого другого.
- Select — для создания кастомных выпадающих списков.
- Tabs — для создания кастомных вкладок, таких как те, что мы используем в кастомных текстовых областях (Textareas) и обзорах продуктов.
Если вы являетесь клиентом Tailwind Plus, перейдите к совершенно новой документации Elements, чтобы узнать больше о том, как всё устроено, и ознакомиться с примерами.
Использование возможностей современного веба
Мы опирались на множество современных возможностей платформ, чтобы сделать Elements как можно более легким и нативным.
- Пользовательские элементы как кроссплатформенная абстракция компонентов.
- beforetoggleАтрибут popover для управления оверлеями и всплывающими окнами с автоматическим рендерингом в верхнем слое вместе с beforetoggle для управления переходами.
- Нативные элементы <dialog> для захвата фокуса и рендеринга в верхнем слое.
- Команды вызова (Invoker commands) для декларативного управления интерактивными элементами, например, переключения кастомного раскрывающегося блока.
- ElementInternals для того, чтобы наши кастомные элементы форм работали как нативные элементы форм.
Мы также включаем все необходимые полифиллы для этих функций, чтобы гарантировать работу Elements во всех тех же браузерах, которые поддерживаются Tailwind CSS v4.0. Это означает, что Elements будет становиться только меньше по мере того, как эти современные функции платформы станут более широко доступными.
Компоненты, которые работают везде
Поскольку HTML является наименьшим общим знаменателем среди всех веб-фреймворков, Elements позволяет всем HTML-блокам интерфейса из Tailwind Plus работать буквально везде.
Вот один из наших примеров Combobox с настроенным двусторонним связыванием в Svelte:
Combobox.svelte
А вот кастомный select в Rails, который включается в отправку формы, точно так же, как нативный элемент формы:
app/controllers/orders_controller.rb
app/views/orders/new.html.erb
При желании вы даже можете использовать Elements в React вместо использования библиотек только для React, таких как Headless UI или React Aria:
Попробуйте сегодня
Все обновленные блоки интерфейса и новая библиотека Elements уже доступны всем клиентам Tailwind Plus.
Ознакомьтесь с категориями блоков интерфейса, такими как Dropdowns и Command Palettes, чтобы самостоятельно протестировать эти обновленные интерактивные примеры, и изучите новую документацию Elements, чтобы узнать, как всё это работает и как настроить элементы под свои проекты.
Нам не терпится увидеть, что вы создадите с помощью всего этого!
Ссылки: The popover attribute