Студия приглашений на основе CSS, демонстрирующая семантические темы daisyUI 5, парные цвета содержимого, объединённые переключатели, ползунки, встроенную проверку браузера и полноценный этап проверки в диалоговом окне.
Официальные классы daisyUI 5.7.47 скомпилированы с Tailwind CSS 4.3.3; логика приложения реализована на обычном JavaScript. · Справочник по реализации
02
Справочник по дизайн-системе daisyUI
daisyUI 5.7.47, сборка с Tailwind CSS 4.3.3. Указанные значения цвета и геометрии относятся к включённой в пакет теме Emerald; в темах Lo-fi и Night намеренно заданы другие значения. Типографика и интервалы страницы — исходные решения на основе размеров, совместимых с Tailwind.
daisyUI предоставляет классы компонентов через плагин Tailwind. В версии 5 настройка находится в CSS: импортируйте tailwindcss, затем объявите плагин daisyui и включите нужные темы. В примере используются btn, card, fieldset, range, checkbox, join и modal, а не специально созданные селекторы для имитации внешнего вида этих компонентов.
Плагин не предоставляет управление состоянием приложения. В этой студии приглашений интерактивность обеспечивают встроенные поля ввода, проверка браузером, методы диалогового окна и небольшой модуль JavaScript. Это различие важно при выборе библиотеки: её можно использовать с несколькими фреймворками, поскольку слой компонентов реализован на CSS, но одно лишь имя класса не выполняет серверную операцию.
Сочетайте каждую цветную поверхность с соответствующей ей ролью содержимого в дизайн-системе daisyUI
Сочетайте каждую цветную поверхность с соответствующей ей ролью содержимого
Для карточки приглашения вместе используются bg-primary и text-primary-content. В полосе ролей тот же принцип применён к secondary, accent и neutral. Это согласованные семантические роли, а не единая неизменная палитра, которую нужно копировать в каждый компонент. При выборе другой включённой темы меняются базовые переменные, а разметка карточки остаётся прежней.
В теме Emerald роль primary задана светло-зелёным цветом, а primary-content — тёмно-зелёным. Автоматически использовать белый текст на любом фоне primary означало бы игнорировать предусмотренную темой роль содержимого. В таблице спецификации приведены фактические значения OKLCH из установленной темы Emerald; они не преобразованы в предположительные шестнадцатеричные цвета бренда.
Скомпилируйте темы, которые собираетесь предлагать, в дизайн-системе daisyUI
Скомпилируйте темы, которые собираетесь предлагать
В конфигурации плагина CSS тема Emerald включена как основная, наряду с Lo-fi и Night. Элемент выбора меняет data-theme у элемента документа. В меню предлагаются только скомпилированные темы; выбор имени темы, которая не была собрана, не создаст соответствующую тему CSS.
В темах также заданы переменные радиусов, размеров полей, границ и эффектов. Поэтому при переключении с Emerald на Lo-fi меняется не только образец цвета. Чтобы применить тему к встроенной области, атрибут data-theme можно назначить этой области вместо html. В этом автономном примере тема намеренно применяется ко всему документу.
Скомпилируйте нужные темы в блоке плагина daisyUI.
Используйте в разметке компонентов семантические классы фона и содержимого.
Измените data-theme и вместе проверьте элементы управления, поверхности и текст.
Радиусы селекторов, полей и контейнеров различаются в дизайн-системе daisyUI
Радиусы селекторов, полей и контейнеров различаются
В теме Emerald значение radius-selector равно одному rem, radius-field — половине rem, а radius-box — одному rem. Базовые единицы size-selector и size-field равны четверти rem и используются при вычислении размеров компонентов. Эти значения не взаимозаменяемы с интервалами между разделами страницы. В спецификации геометрия компонентов отделена от исходной компоновки рабочей области.
На окружающей странице используются системный стек шрифтов без засечек, крупный редакционный заголовок и композиция из двух колонок. daisyUI не требует такой иерархии заголовков. На исходной контрольной точке 700px страница перестраивается в одну колонку: редактор располагается над приглашением. При этом сохраняются все поля и действия — настройки не скрываются ради соответствия снимку экрана.
Дизайн-система daisyUI · A Join Groups · настоящие радиокнопки
Группа объединяет настоящие переключатели radio
Варианты формата представлены радиокнопками с общим атрибутом name и классами join-item и btn. Выбор «Занятие в студии» или «Онлайн-круг» меняет нативное состояние checked и текст предпросмотра. Ряд стилизованных кнопок без сохраняемого состояния выбора не так наглядно передавал бы взаимоисключающий характер этого выбора.
Для числа мест используется нативный ползунок — от четырёх до двадцати четырёх, с шагом два. Элемент output отображает текущее значение, а подписи на концах шкалы поясняют предполагаемый размер встречи. Для материалов используется настоящий флажок. Его состояние меняет нижнюю часть приглашения, а не просто цвет флажка.
Для поля названия заданы обязательное заполнение, а также минимальная и максимальная длина. Классы validator и validator-hint отображают недопустимое состояние, а нативные ограничения проверяет браузер. Форма не обходит проверку корректности с помощью универсального обработчика нажатия на кнопку предварительного просмотра.
После прохождения обычной проверки обработчик отправки удаляет пробелы по краям названия и проверяет длину содержимого. Это позволяет выявить строку из пробелов, которая может удовлетворять minlength без предварительного удаления пробелов. При следующем вводе пользовательское сообщение об ошибке сбрасывается, чтобы исправленное название можно было отправить. Пользовательский текст выводится через textContent и никогда не вставляется как HTML.
Дизайн-система daisyUI · В настоящем диалоговом окне сохраняется снимок данных для проверки
В настоящем диалоговом окне сохраняется снимок данных для проверки
При нажатии «Проверить приглашение» текущие название, формат, число мест и параметры материалов копируются в снимок, после чего вызывается dialog.showModal. Класс modal задаёт стилизацию daisyUI, а поведение нативного диалогового окна обеспечивает браузер. Заголовок связывается с окном через aria-labelledby; клавиша Escape закрывает окно без сохранения.
Кнопка «Продолжить редактирование» закрывает диалоговое окно и не меняет форму. Кнопка «Сохранить локальный черновик» закрывает окно и выводит точное содержимое снимка в области статуса. В сообщении указано, что приглашения не отправлялись. Это не имитация успешной отправки электронных писем: в примере нет ни списка получателей, ни сервиса отправки.
Дизайн-система daisyUI · Сброс и редактирование заметно меняют результат
Сброс и редактирование заметно меняют результат
Изменение поля сразу обновляет карточку и скрывает предыдущее уведомление о сохранении. Это не позволяет устаревшему сообщению об успехе выглядеть как подтверждение нового, ещё не сохранённого приглашения. После восстановления браузером исходных значений сброс заново формирует предпросмотр на основе этих значений. Ранее выбранная тема при этом сохраняется.
Заливка декоративной композиции из трёх фигур определяется через primary-content, поэтому при смене темы она меняется вместе с типографикой. Элемент помечен aria-hidden, так как не содержит сведений о числе мест или формате. Смысловую информацию передают видимые название и нижняя часть приглашения.
Недопустимый ввод блокирует проверку и указывает на поле названия.
Клавиша Escape закрывает окно проверки, не создавая сохранённый результат.
Редактирование после сохранения удаляет прежний результат, сохраняя текущую тему.
Дизайн-система daisyUI: небольшая сборка CSS с явным поиском исходных файлов
Небольшая сборка CSS с явным поиском исходных файлов
В предоставленной настройке используются CLI Tailwind, локальный файл input.css и три исходных файла, показанных выше. Директива source(none) отключает широкое автоматическое сканирование, а явная директива source указывает на HTML с компонентом и классами утилит. Благодаря этому сгенерированный в примере CSS зависит от фактической разметки.
Результат сборки объединяется с исходной таблицей стилей макета; для взаимодействия используется обычный JavaScript. В автономном предпросмотре результат встроен, внешние зависимости отсутствуют. В проектах на Vite, Astro или React можно использовать стандартную интеграцию Tailwind, но следует сохранить список включённых тем и убедиться, что исходные файлы с классами добавлены в сборку.
Для фона primary всегда используется текст primary-content.
Ползунок остаётся нативным элементом ввода с параметрами min, max и step.
Диалоговое окно открывается через showModal, а не с помощью одного лишь визуального класса open.
Локальный черновик
Предпросмотр в реальном времени, неизменяемый снимок для проверки, выбор темы и нативная проверка корректности.
javascript
const q=s=>document.querySelector(s),form=q('#invitation'),dialog=q('#review');let snapshot;
function update(){const title=q('#title').value.trim(),seats=q('#seats').value,format=q('[name="format"]:checked').value,materials=q('#materials').checked;q('#preview-title').textContent=title||'Your workshop title';q('#seat-count').value=seats;q('#preview-seats').textContent=`${seats} seats`;q('#preview-format').textContent=format;q('#preview-materials').textContent=materials?'Materials included':'Bring your own materials';q('#result').hidden=true;}
q('#theme').addEventListener('change',e=>document.documentElement.dataset.theme=e.target.value);form.addEventListener('input',update);form.addEventListener('reset',()=>setTimeout(update,0));form.addEventListener('submit',e=>{e.preventDefault();snapshot={title:q('#title').value.trim(),seats:q('#seats').value,format:q('[name="format"]:checked').value,materials:q('#materials').checked};if(snapshot.title.length<5){q('#title').setCustomValidity('Enter at least five non-space characters.');q('#title').reportValidity();return;}q('#review-copy').textContent=`${snapshot.title} · ${snapshot.format} · ${snapshot.seats} seats · ${snapshot.materials?'Materials included':'Bring your own materials'}`;dialog.showModal();});q('#title').addEventListener('input',()=>q('#title').setCustomValidity(''));q('#back').onclick=()=>dialog.close();q('#approve').onclick=()=>{dialog.close();q('#result').hidden=false;q('#result').textContent=`Local draft saved: ${snapshot.title}, ${snapshot.seats} seats. No invitations were sent.`;};update();
Сохраните приведённый код взаимодействия в файле app.js.
Настройка области просмотра и нативная загрузка ресурсов включены.
04
Настройка агента дизайн-системы daisyUI
Отправная точка для реализации
Проверено с daisyUI 5.7.47 и Tailwind CSS 4.3.3. Иллюстрация карточки и макет страницы разработаны специально для примера; компонентные CSS и значения темы Emerald — нативные.
css
/* npm install -D [email protected] @tailwindcss/[email protected][email protected] */
/* Save the HTML example as body.html in the same directory as input.css. */
/* input.css */
@import "tailwindcss" source(none);
@source "./body.html";
@plugin "daisyui" {
themes: emerald --default, lofi, night;
}
/* Build: npx @tailwindcss/cli -i ./input.css -o ./output.css --minify */
/* In index.html, link output.css then style.css; include body.html markup. */
/* Load the supplied app.js with <script src="app.js" defer></script>. */
/* Set <html lang="en" data-theme="emerald"> and a viewport meta tag. */
Запрос для вашего проекта
Промпт для AI-агента
Используйте daisyUI 5.7.47 с предоставленной сборкой Tailwind 4 и темами Emerald, Lo-fi и Night, чтобы воссоздать студию приглашений. Сочетайте семантические цвета фона с соответствующими ролями текста. Сохраните объединённые нативные радиокнопки, ползунок числа мест с чётным шагом, флажок материалов и проверку названия. При проверке текущее приглашение помещается в нативное диалоговое окно; команда «Сохранить локальный черновик» подтверждает этот снимок, а последующее редактирование удаляет сообщение. Сбрасывайте форму независимо от выбранной темы и не заявляйте, что приглашения отправлены.
05
Дизайн-система daisyUI · Источники и область применения
daisyUI 5.7.47 и Tailwind CSS 4.3.3. Значения Emerald зависят от темы. Локальный черновик не сохраняет данные и не отправляет приглашения.
