Preline 4.2.0 HSTabs и HSInputNumber с Tailwind CSS 4.3.3 и стандартной темой из пакета. · Справочник по реализации
02
Preline UI Справочник по дизайн-системе
Preline npm 4.2.0 с Tailwind CSS 4.3.3; стандартная тема из установленного пакета. На сайте маркетинга и документации может отображаться баннер с более новой версией, поэтому в исполняемом примере версия зафиксирована явно. Псевдонимы темы остаются псевдонимами; шестнадцатеричные значения не предполагаются.
Дизайн-система Preline UI Preline объединяет утилитарную разметку с плагинами поведения
Preline объединяет утилитарную разметку с плагинами поведения
В планировщике используются два нативных плагина Preline: HSTabs выбирает панель сеанса, а HSInputNumber управляет ограниченными кнопками увеличения и уменьшения значения. Большая часть визуального оформления задаётся классами Tailwind. Оригинальная иллюстрация сеанса и расчёт бюджета относятся к приложению, а не к вымышленному универсальному компоненту бронирования.
Это различие важно учитывать при копировании примера. Одна только установка пакета JavaScript не компилирует утилитарные классы и не предоставляет разметку приложения. И наоборот: если скопировать HTML, но не инициализировать плагины, поведение вкладок и числового поля будет работать не полностью. В полной интеграции ниже явно представлены все необходимые части.
Дизайн-система Preline UI: проследите семантические псевдонимы до соответствующих ролей палитры
Проследите семантические псевдонимы до соответствующих ролей палитры
В стандартной светлой теме из пакета --primary ссылается на --color-primary-600, а основой синей гаммы служит шкала primary. Основной цвет текста на этом фоне — белый; для состояний при наведении, фокусе и активации используется роль с индексом 700. Выбранная вкладка и действие Save используют одну цветовую гамму благодаря семантическим классам утилит.
Для карточек используются --card и --card-line, а для поля количества — --layer и --layer-line. Разделение этих ролей делает будущие изменения темы более предсказуемыми, чем повсеместное использование классов с буквальными значениями белого и серого. В таблице сохранены официальные псевдонимы, а не вычисленные приблизительные значения, представленные как исходные токены.
Используйте настоящую шкалу Tailwind и отмечайте оригинальные исключения
Для заголовка страницы и расчётной суммы используется text-3xl, для названия сеанса — text-2xl, а для текста формы — text-sm. Отступ карточки p-5 равен 1.25rem при стандартном шаге интервалов. Увеличенный внутренний отступ страницы sm:p-8 начинает действовать на малой контрольной точке Tailwind — 640px, а исходная сетка перестраивается в одну колонку при 760px.
В локальной таблице стилей используется system-ui; необязательные пользовательские шрифты, указанные в файле темы Preline, не загружаются. При ширине 280px вкладки переносятся на две строки, а карточка группы перемещается под описание сеанса. Это намеренные решения по компоновке приложения, а не утверждение, что все макеты Preline имеют такую геометрию.
Дизайн-система Preline UI: связывайте элементы управления вкладками и панели с помощью постоянных идентификаторов
Связывайте элементы управления вкладками с панелями посредством стабильных ID
У каждой вкладки есть data-hs-tab, указывающий на уникальную панель. Связь продублирована в aria-controls вкладки и aria-labelledby панели для вспомогательных технологий. Атрибуты active и aria-selected=true заданы только одной начальной вкладке, а остальные панели изначально скрыты. При навигации HSTabs обновляет эти состояния.
Для активного состояния используются стили hs-tab-active:bg-primary и hs-tab-active:text-primary-foreground. Эти варианты определены в variants.css из Preline, поэтому без импорта этого файла выбранное состояние может быть визуально неоднозначным, даже если JavaScript корректно меняет классы. Приложение отслеживает изменения выбора, чтобы обновлять расположенную рядом сводку.
Выберите мастерскую керамики и проверьте её название, материалы и продолжительность.
Увеличьте число участников с двух до трёх и проверьте расчётную сумму $54.
Сохраните локальный план, затем смените вкладку, чтобы сбросить прежнее подтверждение.
Дизайн-система Preline UI: согласуйте параметры плагинов и ограничения ввода
Настройки плагинов должны соответствовать ограничениям полей ввода
Для контейнера количества в data-hs-input-number заданы min — один, max — шесть и step — один. Те же ограничения указаны в стандартном поле ввода числа. Так и кнопки плагина, и встроенная проверка браузера используют один допустимый диапазон, а введённое вручную число не может обойти ограничение, предусмотренное только обработчиком кнопок.
Сводка отслеживает события input и change, а также обратный вызов change плагина. Если вручную введено недопустимое значение, вместо итоговой суммы показывается длинное тире, а кнопка сохранения отключается; обработчик сохранения также вызывает reportValidity перед чтением значения. Ограничение в шесть человек — примерное ограничение для планирования, а не гарантия реальной доступности.
Дизайн-система Preline UI: рассчитывайте сумму по активной панели, а не по устаревшим подписям
Выполняйте расчёты по активной панели, а не по устаревшим меткам
В атрибутах data каждой панели хранятся постоянные название сеанса, цена и продолжительность. Функция обновления считывает видимую панель и умножает стоимость материалов на допустимое число участников. Так «Студия печати», «Мастерская керамики» и «Прогулка с рисованием» становятся разными вариантами, а не вкладками, которые показывают одну и ту же карточку-заполнитель.
В расчётную сумму включены только материалы. В исходных описаниях указано, что покрывает эта сумма, а на странице явно сказано, что она не бронирует место. За этими цифрами не стоят оплата, проверка наличия мест или внешнее расписание. Для настоящего процесса бронирования понадобятся отдельные системы и проверка данных на сервере.
Дизайн-система Preline UI: используйте экспортируемую точку входа для ручной инициализации в этой версии пакета
Используйте экспортируемый способ ручного запуска в этой версии пакета
В проверенном пакете версии 4.2.0 доступны именованные экспорты HSTabs и HSInputNumber из preline/non-auto. В примере они импортируются, а после появления разметки вызываются их методы autoInit. Несмотря на название, здесь autoInit — явное сканирование, запускаемое приложением, а не неявный обработчик загрузки страницы для всего пакета.
При проверке в путях .mjs отдельных плагинов не обнаружилось класса по умолчанию, а прямые импорты из этих путей могли удаляться из сборки из-за метаданных пакета о побочных эффектах. Использование экспортируемой точки входа для ручной инициализации устранило эту конкретную проблему сборки. Поэтому в примере показан работающий импорт для указанной версии, а не непроверенный универсальный импорт плагина.
Дизайн-система Preline UI: отменяйте подтверждение при изменении плана
Отменяйте подтверждение при изменении плана
Кнопка «Сохранить локальный план» записывает статусное сообщение с точным названием сеанса, числом участников и общей стоимостью материалов, после чего отключается. При любом изменении количества или выбранной вкладки вызывается update: она возвращает обычное пояснительное сообщение и заново проверяет, можно ли сохранять план. Ранее сохранённое сообщение не останется привязанным к новому плану.
В локальном тесте выбрали «Мастерскую керамики», увеличили число участников до трёх и проверили сообщение с суммой $54. Также проверили фактически отображаемую страницу при ширине 280px. Фиксированная сумма или кнопка, которая лишь меняет свою подпись, не доказывают, что два встроенных плагина и состояние приложения связаны между собой.
Используйте область статуса для точного результата локального расчёта.
Не учитывайте недопустимые значения при расчёте суммы.
При адаптации разметки сохраняйте постоянные идентификаторы вкладок и панелей.
Дизайн-система Preline UI: компилируйте тему, варианты и фактическую исходную разметку
Компилируйте тему, варианты и фактическую исходную разметку
Сначала таблица стилей импортирует Tailwind, затем варианты Preline и стандартную тему из пакета. Явные пути к исходным файлам включают локальный HTML, приложение JavaScript и файлы дистрибутива Preline, поэтому в сгенерированном CSS доступны утилиты, зависящие от состояния. После этих импортов подключается таблица стилей исходного макета.
В автономном предпросмотре встроены скомпилированный CSS и собранный JavaScript; запросы к CDN не выполняются. В производственном проекте те же результаты можно отдавать отдельными файлами. Пути к файлам должны быть относительными к фактической точке входа CSS; в расположенном ниже воспроизводимом примере все исходные файлы находятся в корне проекта, чтобы не зависеть от скрытой временной рабочей области.
Иллюстрации созданы специально для CSS и скрыты от вспомогательных технологий с помощью aria-hidden.
Эта таблица стилей подключается после импортов Tailwind и Preline.
04
Дизайн-система Preline UI Настройка агента
Отправная точка для реализации
Проверена встроенная версия Preline 4.2.0. Полная разметка, логика и CSS приведены выше. Пути к исходным файлам в input.css предполагают, что все четыре исходных файла находятся в корне проекта.
bash
# Create an empty directory and run:
npm init -y
npm install [email protected][email protected] @tailwindcss/[email protected] esbuild
# Save the complete examples above as body.html, app.js and style.css.
# Create input.css with exactly:
# @import "tailwindcss" source(none);
# @import "./node_modules/preline/variants.css";
# @import "./node_modules/preline/css/themes/theme.css";
# @source "./body.html";
# @source "./app.js";
# @source "./node_modules/preline/dist/*.js";
# @import "./style.css";
npx @tailwindcss/cli -i input.css -o bundle.css --minify
npx esbuild app.js --bundle --format=iife --outfile=bundle.js
# Assemble the actual root document without placeholder markup:
node -e 'const f=require("fs");f.writeFileSync("index.html",`<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Studio planner</title><link rel="stylesheet" href="bundle.css"></head><body>${f.readFileSync("body.html","utf8")}<script src="bundle.js"></script></body></html>`)'
# Serve this directory with your existing static server.
Запрос для вашего проекта
Промпт для AI-агента
Используйте Preline 4.2.0 с именованными импортами HSTabs и HSInputNumber из preline/non-auto и явно инициализируйте оба плагина. Сохраните три мастер-класса Studio Saturday, диапазон количества от одного до шести и стоимость материалов выбранного мастер-класса. Рассчитывайте сумму по активной панели и количеству участников, сбрасывайте сохранённый план при изменении любого из этих значений и проверяйте допустимость числового диапазона перед локальным сохранением. Добавьте указанную настройку темы и вариантов Tailwind и исходную компоновку. Не превращайте локальный план студии в подтверждение бронирования или оплаты.
05
Preline UI Источники и область применения дизайн-системы
Встроенный Preline npm 4.2.0 и Tailwind CSS 4.3.3. Исходные описания сеансов, иллюстрации и вымышленные суммы на материалы. Сохранение записывает только локальное состояние страницы; бронирование, оплата и отправка внешних сообщений не выполняются.
