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