Композиция с нативными аккордеоном и боковой панелью Flowbite 4, проверенными семантическими псевдонимами темы, постоянным списком вещей для поездки и доступным локальным сценарием заметок о материалах.
Классы Accordion и Drawer из Flowbite 4.0.2, тема по умолчанию и Tailwind CSS 4.3.3. · Справочник по реализации
02
Справочник по дизайн-системе Flowbite
Тема по умолчанию Flowbite 4.0.2 и Tailwind CSS 4.3.3. Приведённые ниже именованные псевдонимы — реальные переменные темы Flowbite; указанные ими цветовые шкалы взяты из Tailwind. Иллюстрация для упаковки и варианты отступов приложения разработаны специально для этого примера.
Дизайн-система Flowbite: именованная тема по умолчанию в версии Four
Flowbite Four: именованная тема по умолчанию
В этом примере используется Flowbite 4.0.2, а не неупорядоченный набор старых фрагментов в сине-серой гамме. Тема по умолчанию задаёт семантические псевдонимы, такие как color-body, color-heading, color-brand и color-neutral-primary. Страница подключает эту тему до применения плагина Flowbite Tailwind, а затем использует соответствующие классы, например text-heading и bg-brand.
Псевдонимы ссылаются на цветовые шкалы Tailwind. Например, для обычного действия бренда используется blue-700, а для более заметного состояния при наведении — blue-800. В спецификации эти ссылки сохранены, чтобы читатель мог отличить семантическую роль от базового значения цвета. В иллюстрации для упаковки используются те же роли бренда, но она не является официальной иллюстрацией Flowbite.
Дизайн-система Flowbite: геометрия темы и компоновка Tailwind работают вместе
Геометрия темы и компоновка Tailwind работают вместе
В теме по умолчанию для radius-base задано значение двенадцать пикселей; класс rounded-base используется для основных контейнеров, элементов управления панели и уведомления о результате. Также в теме определены отдельные радиусы два, четыре, шесть, восемь и шестнадцать пикселей. Поэтому подключение темы важно, если скопированный компонент использует новые семантические имена классов.
В начале предоставленного стека шрифтов указан Inter, но этот автономный предварительный просмотр не загружает шрифт из сети и использует доступный системный шрифт. Для отступов страницы применяются утилиты Tailwind: p-6 соответствует полутора rem, gap-8 — двум rem, а настольный p-10 — двум с половиной rem. Эти утилиты компоновки не выдаются за отдельную, выдуманную шкалу отступов Flowbite.
Дизайн-система Flowbite: один экземпляр аккордеона управляет тремя категориями
Один экземпляр аккордеона управляет тремя категориями
JavaScript создаёт Accordion, которому передаётся массив элементов. У каждого элемента есть постоянный идентификатор, элемент-триггер и целевая панель; при загрузке активна категория «Бумага». Параметр alwaysOpen имеет значение false, поэтому при открытии раздела «Инструменты» раздел «Бумага» закрывается. В параметрах activeClasses и inactiveClasses используются семантические имена текста и поверхностей темы по умолчанию.
Класс управляет видимостью панели и обновляет aria-expanded у её триггера. В разметке заданы aria-controls и соответствующие идентификаторы панелей. Флажки остаются в документе, даже когда панель свёрнута, поэтому их состояние сохраняется при переключении категорий. Сворачивание раздела скрывает его, но не сбрасывает результаты работы пользователя над списком вещей.
Дизайн-система Flowbite: прогресс рассчитывается по фактическим флажкам
Прогресс рассчитывается по фактическим флажкам
Шесть настоящих флажков соответствуют конкретным материалам для мастерской. Приложение рассчитывает количество собранных вещей, следующую вещь и текст о том, сколько осталось, исходя из текущих значений checked. Ширина индикатора прогресса и aria-valuenow обновляются по тому же количеству; отдельный счётчик не может рассинхронизироваться со списком.
Бумага для черчения и калька — отдельные пункты, поскольку их подготовка различается. Коврик для резки предназначен для общей рабочей станции, а для малярной ленты с низкой адгезией приведено предупреждение о поверхности стены. Благодаря таким конкретным деталям раскрытая категория становится полезной, а аккордеон не просто скрывает повторяющиеся общие абзацы.
Откройте раздел «Бумага» и отметьте, что бумага для черчения собрана.
Откройте раздел «Инструменты», отметьте, что карандаши и маркеры собраны, а затем вернитесь в раздел «Бумага».
Убедитесь, что оба пункта остались отмеченными, а в сводке указано «2 из 6».
Дизайн-система Flowbite: один экземпляр панели управляет её видимостью и фоном-затемнением
Один экземпляр панели управляет её видимостью и фоном-затемнением
Панель материалов инициализируется через new Drawer с параметрами placement right, backdrop true и bodyScrolling false. При открытии панели вызывается show, при нажатии кнопки «Закрыть» — hide. Встроенная реализация Flowbite применяет классы позиционирования и переходов, фон-затемнение и атрибуты видимости. На этой странице намеренно используется JavaScript API, а не второй инициализатор с атрибутами данных для той же панели.
Ширина панели составляет двадцать четыре rem, а благодаря max-w-full она остаётся удобной даже в узком окне просмотра. Содержимое панели можно прокручивать по вертикали. Высота страницы определяется её содержимым; h-screen панели — это намеренно фиксированное наложение, которое не создаёт цикла минимальной высоты для встроенной страницы.
Дизайн-система Flowbite: управление фокусом на всех этапах работы панели
Управление фокусом на всех этапах работы панели
Обратный вызов onShow делает фоновый элемент main инертным и переводит фокус на поле Prepared by. Обратный вызов onHide снимает inert и возвращает фокус на элемент Prepare materials note. Небольшой обработчик keydown циклически переключает фокус клавишами Tab и Shift+Tab между первым и последним элементами управления панели. Эти дополнения показаны в полном исходном коде: они не являются возможностями, которые можно приписать одному лишь классу оформления.
Flowbite обрабатывает клавишу Escape для своей панели. Обратные вызовы примера гарантируют, что при любом способе закрытия фоновая область снова станет интерактивной. Панель связана с меткой через aria-labelledby, а у кнопки закрытия задано явное доступное имя. В реальном приложении это поведение следует проверять вместе с собственными порталами и маршрутизацией, а не считать, что одно лишь название библиотеки гарантирует доступность.
Дизайн-система Flowbite: проверьте владельца и сохраните только локальный текст
Проверьте владельца и сохраните только локальный текст
Поле Prepared by обязательно; для него заданы минимальная и максимальная длина. Обработчик отправки дополнительно удаляет пробелы в начале и конце имени и отклоняет ввод, состоящий только из пробелов. Поле Session note необязательно, его длина ограничена 240 символами. Сводка оставшихся вещей обновляется при открытии панели, поэтому она отражает текущий список, а не предыдущее состояние упаковки.
После сохранения панель закрывается, а приложение сообщает о локальной заметке с именем владельца, количеством собранных вещей и необязательным текстом. Письмо не отправляется, общий документ не создаётся. Пользовательские строки записываются через textContent. При изменении списка результат сбрасывается, поскольку прежнее количество иначе могло бы ввести в заблуждение.
Входной файл Tailwind подключает тему Flowbite по умолчанию и регистрирует flowbite/plugin. Директивы source явно указывают на HTML, модуль приложения и ESM-библиотеку Flowbite. Последний источник особенно важен: классы, которые библиотека добавляет во время выполнения, должны попасть в создаваемую таблицу стилей, даже если их нет в исходном HTML.
Пакет импортирует Accordion и Drawer из flowbite. В примере каждый экземпляр инициализируется один раз после появления соответствующей разметки. В приложениях на фреймворках, где представления монтируются и размонтируются, настройку жизненного цикла следует сочетать с очисткой экземпляров, чтобы избежать дублирующихся обработчиков. На локальной странице есть одно монтирование и нет переходов между маршрутами на стороне клиента.
Дизайн-система Flowbite: руководство по сбору вещей с чёткими границами реализации
Вспомогательное средство для упаковки с чёткими границами реализации
Это практическое руководство показывает аккордеон с большим объёмом текста, сохранение состояния флажков и сценарий работы с оверлеем. В нём нет вымышленных данных о наличии товаров или результатов удалённого оформления закупки. Все шесть материалов — примеры задач по подготовке мастерской, а сохранённая заметка остаётся в памяти на время работы страницы.
Семантическая тема по умолчанию, классы компонентов и поведение JavaScript предоставляются Flowbite; содержимое о мастерской, оригинальная иллюстрация и дополнение для управления фокусом — это код приложения. Такое разделение позволяет использовать готовую композицию и понимать, за какие задачи действительно отвечает библиотека.
Для управления видимостью панели используйте экземпляр Flowbite с сохранением состояния.
Обрабатывайте данные контрольного списка и вычисление прогресса в логике приложения.
Подключайте реальные закупки или общее хранилище данных только через явную интеграцию с серверной частью.
Кнопки связаны с идентификаторами панелей через aria-controls.
Выдвижная панель помечена заголовком.
Индикатор выполнения показывает то же количество, что и для зрячих пользователей.
Экземпляры Flowbite и локальное состояние
Инициализация Accordion/Drawer, а также специфичные для приложения контрольный список и управление фокусом.
javascript
import {Accordion,Drawer} from 'flowbite';
const q=s=>document.querySelector(s),drawerEl=q('#materials-drawer'),page=q('#page');
const accordion=new Accordion(q('#packing-accordion'),['paper','tools','space'].map((id,i)=>({id,triggerEl:q(`#${id}-trigger`),targetEl:q(`#${id}-panel`),active:i===0})),{alwaysOpen:false,activeClasses:'bg-brand-softer text-fg-brand',inactiveClasses:'bg-neutral-primary text-heading'});
const drawer=new Drawer(drawerEl,{placement:'right',backdrop:true,bodyScrolling:false,onShow(){page.inert=true;q('#owner').focus();},onHide(){page.inert=false;q('#open-note').focus();}});
const boxes=[...document.querySelectorAll('[data-item]')];
function refresh(){let packed=boxes.filter(x=>x.checked),left=boxes.filter(x=>!x.checked);q('#count').value=`${packed.length} of 6`;q('#bar').style.width=`${packed.length/6*100}%`;q('[role="progressbar"]').setAttribute('aria-valuenow',packed.length);q('#next-item').textContent=left.length?`Next: ${left[0].dataset.item}`:'Everything on the list is packed.';q('#remaining').textContent=left.length?`Still needed: ${left.map(x=>x.dataset.item).join(', ')}.`:'All six materials are packed.';q('#result').hidden=true;}
boxes.forEach(x=>x.addEventListener('change',refresh));q('#clear').onclick=()=>{boxes.forEach(x=>x.checked=false);refresh();};q('#open-note').onclick=()=>{refresh();drawer.show();};q('#close-note').onclick=()=>drawer.hide();drawerEl.addEventListener('keydown',e=>{if(e.key==='Tab'){let els=[...drawerEl.querySelectorAll('button,input,textarea')],first=els[0],last=els.at(-1);if(e.shiftKey&&document.activeElement===first){e.preventDefault();last.focus();}else if(!e.shiftKey&&document.activeElement===last){e.preventDefault();first.focus();}}});q('#note-form').onsubmit=e=>{e.preventDefault();const owner=q('#owner');if(owner.value.trim().length<2){owner.setCustomValidity('Enter at least two non-space characters.');owner.reportValidity();return;}drawer.hide();q('#result').hidden=false;q('#result').textContent=`Local note prepared by ${owner.value.trim()}: ${boxes.filter(x=>x.checked).length} of 6 items packed. ${q('#note').value.trim()||'No extra note.'}`;};q('#owner').oninput=()=>q('#owner').setCustomValidity('');refresh();
Сохраните предоставленный код взаимодействия в main.js и скомпилируйте его в bundle.js, как показано в инструкции по настройке.
Настройка области просмотра и нативная загрузка ресурсов включены.
04
Настройка агента дизайн-системы Flowbite
Отправная точка для реализации
Проверено на Flowbite 4.0.2 и Tailwind CSS 4.3.3. Укажите фактический путь к input.css вместо пути к исходному коду в node_modules. Удалённые шрифты не требуются.
css
/* npm install [email protected] */
/* npm install -D [email protected] @tailwindcss/[email protected] esbuild */
/* input.css, next to body.html and main.js: */
@import "tailwindcss" source(none);
@import "flowbite/src/themes/default";
@plugin "flowbite/plugin";
@source "./body.html";
@source "./main.js";
@source "./node_modules/flowbite/lib/esm";
/* npx @tailwindcss/cli -i input.css -o output.css --minify */
/* npx esbuild main.js --bundle --format=iife --outfile=bundle.js */
/* index.html: link output.css then style.css; include the supplied markup. */
/* Load bundle.js with defer, or after the markup. */
Запрос для вашего проекта
Промпт для AI-агента
Используйте полное руководство Flowbite 4.0.2 по сбору вещей для мастерской, включая обнаружение исходных файлов Tailwind и инициализацию стандартных Accordion и Drawer. Свяжите сгруппированные материалы и состояние контрольного списка с руководством; перед сохранением локальной заметки проверьте сведения об ответственном. Сохраните клавиатурное управление фокусом в выдвижной панели, блокировку фона и поведение при закрытии. Не объединяйте оригинальную иллюстрацию CSS с семантической темой библиотеки. Не добавляйте в этот локальный сценарий тикеты службы поддержки или внешнюю отправку данных.
05
Источники и область применения дизайн-системы Flowbite
Flowbite 4.0.2 с темой по умолчанию. Содержание о сборе вещей, декоративная иллюстрация и дополнение для управления фокусом — оригинальные. Заметки о материалах хранятся локально.
