flowbite

Flowbite — это библиотека UI-компонентов с открытым исходным кодом и фронтенд-фреймворк, построенный на базе Tailwind CSS. Его цель — ускорить разработку веб-сайтов, предоставляя готовый набор веб-компонентов, использующих утилитарные классы Tailwind, чтобы разработчики могли собирать интерфейсы из существующих паттернов вместо того, чтобы писать каждый элемент с нуля. **Установка и использование** Библиотеку можно добавить в существующий проект Tailwind CSS в качестве плагина через npm (`npm install flowbite`). Документированная настройка предполагает импорт переменных темы Flowbite в основной CSS-файл, регистрацию плагина, настройку исходных файлов внутри node_modules и загрузку скомпилированного JavaScript, который обеспечивает работу интерактивных элементов. В README упоминается несколько встроенных тем, включая default, minimal, enterprise, playful и mono, каждая из которых сочетается с определенным веб-шрифтом. Также описан путь через CDN для быстрого добавления минифицированных CSS и JS на страницу. **Модель взаимодействия** Интерактивные компоненты в основном управляются через интерфейс data-атрибутов: такие атрибуты, как `data-modal-target` и `data-modal-toggle`, связывают элементы-триггеры с компонентами без написания пользовательских скриптов, и большинство примеров в документации следуют этой стратегии. Для большего контроля функция `initFlowbite()` (или специализированные помощники по категориям, такие как `initDropdowns` и `initModals`) позволяет таким фреймворкам, как Vue и Nuxt, самостоятельно регистрировать слушатели событий. **Программные и типизированные API** Пакет предоставляет компоненты в виде JavaScript-классов с поддержкой ESM и CJS. Например, модальное окно можно создать с параметрами, охватывающими размещение, поведение фона и колбэки, такие как `onShow`, `onHide` и `onToggle`. Предусмотрены объявления типов TypeScript, включая интерфейсы `ModalOptions` и `ModalInterface`, что позволяет типизировать объекты опций и экземпляры. **Каталог компонентов** В README перечислен широкий спектр компонентов, среди которых: алерты, бейджи, хлебные крошки, кнопки и группы кнопок, карточки, выпадающие списки, формы, группы списков, типографика, модальные окна, вкладки, навигационные панели, пагинация, таймлайны, индикаторы прогресса, таблицы, тосты, тултипы, датапикеры, спиннеры, футеры, аккордеоны, сайдбары, карусели, аватары, рейтинги и различные поля ввода (текстовое поле, загрузка файла, поиск, select, textarea, checkbox, radio, toggle, range slider). **Поддержка фреймворков и платформ** UI-компоненты Flowbite имеют нативную поддержку RTL, которая активируется с помощью атрибута `dir="rtl"`. Существуют поддерживаемые сообществом отдельные библиотеки для React, Vue, Svelte, Angular и Qwik. Также приведены руководства по интеграции для таких фреймворков, как Next.js, Remix, Nuxt, Astro, MeteorJS, Gatsby, SolidJS и Qwik, а также для бэкенд-фреймворков, включая Laravel, Symfony, Ruby on Rails 7, Phoenix (Elixir), Django и Flask, так как библиотека опирается на vanilla JavaScript. **Связанные ресурсы** Проект указывает на дополнительные ресурсы в рамках той же экосистемы: дизайн-систему Figma, готовые секции «Flowbite Blocks», набор иконок и GPT-ассистент. Наряду с пакетом с открытым исходным кодом предлагается коммерческая Pro-версия, а репозиторий содержит ссылки на каналы сообщества, такие как Discord, и бейджи загрузок/версий npm. Лицензия — MIT.