Оглавление
daisyUI
Готовые компоненты поверх Tailwind CSS: кнопки, карточки, меню и модальные окна короткими классами, темы.
1.Начало работы
- Что такое daisyUIБиблиотека готовых компонентов для Tailwind CSS: как она связана с Tailwind, как попробовать её через CDN и что будет в курсе.
- Установка с ViteКак создать проект на Vite, подключить Tailwind CSS 4 и добавить daisyUI 5 строкой @plugin в CSS-файле.
- Из чего состоят классыКомпонент, часть и модификатор: как читать и собирать классы daisyUI вроде btn btn-primary btn-sm.
2.Цвета и темы
- Семантические цветаЦвета daisyUI по назначению: primary, secondary, base, info, error и пары с -content, утилиты bg-primary и text-base-content.
- Готовые темыВстроенные темы daisyUI, атрибут data-theme, тема для части страницы и выбор тем в настройках плагина.
- Переключение темКак менять тему кнопкой: data-theme из JavaScript, запоминание выбора в localStorage и класс theme-controller без скриптов.
- Своя темаКак создать тему в цветах своего бренда: переменные --color-*, скругления --radius-*, блок @plugin daisyui/theme и правка готовой темы.
3.Компоненты
- КнопкиКомпонент btn: цвета, стили outline, soft, ghost и link, размеры, круглые и широкие кнопки, ссылки в виде кнопок.
- КарточкиКомпонент card: картинка в figure, card-body, card-title и card-actions, рамка, горизонтальная карточка и сетка карточек курсов.
- Шапка и менюКомпоненты navbar и menu: шапка сайта из трёх частей, горизонтальное и вертикальное меню, заголовки, активный пункт и вложенные списки.
- Выпадающее менюКомпонент dropdown: меню на details и summary, вариант через фокус, выравнивание dropdown-end и раскрытие при наведении.
- Модальное окноКомпонент modal на теге dialog: открытие методом showModal, закрытие формой method=dialog, закрытие по щелчку на фон и положение окна.
- Боковая панельКомпонент drawer: выезжающая панель на флажке, части drawer-toggle, drawer-content и drawer-side, постоянная панель на широком экране через lg:drawer-open.
- ВкладкиКомпонент tabs: ряд вкладок с tab-active, стили tabs-box, tabs-border и tabs-lift, вкладки с содержимым на радиокнопках.
- Раскрывающиеся блоки и аккордеонКомпонент collapse: заголовок и скрытое содержимое, стрелка и плюс, раскрытие на флажке и на details, аккордеон из радиокнопок.
- Уведомления, значки и загрузкаКомпоненты для обратной связи: alert для сообщений, badge для меток, toast для всплывающих уведомлений и loading для индикатора загрузки.
4.Формы и данные
- Текстовые поля и fieldsetПоля input и textarea в daisyUI, цвета и размеры, группировка полей в fieldset с legend, подписи label и подсказки.
- Список, флажок и переключательКомпоненты select, checkbox, radio и toggle: выбор из списка, флажки и радиокнопки, переключатели и подписи к ним.
- Таблицы и статистикаКомпонент table с полосами table-zebra и прокруткой на узком экране, компонент stats для ключевых чисел в личном кабинете.
5.Практика
- Адаптивная вёрсткаКак сочетать компоненты daisyUI с адаптивными префиксами Tailwind: меню-гамбургер в шапке, hero-блок, сетка карточек и модификаторы с sm:, md:, lg:.
- Настройка компонентов утилитамиКак менять вид компонентов daisyUI классами Tailwind: размеры, скругления, отступы, почему утилита сильнее компонента, суффикс ! и когда лучше менять тему.
- Сборка для публикацииКак собрать проект с daisyUI командой npm run build: в CSS попадают только используемые компоненты и выбранные темы, почему нельзя склеивать имена классов из частей.