# Дизайн-система Flowbite ## Предварительный просмотр интерфейса дизайн-системы Flowbite Разверните три категории упаковки, отметьте материалы и подготовьте локальную заметку во встроенной панели. ## Справочник по дизайн-системе Flowbite Тема по умолчанию Flowbite 4.0.2 и Tailwind CSS 4.3.3. Приведённые ниже именованные псевдонимы — реальные переменные темы Flowbite; указанные ими цветовые шкалы взяты из Tailwind. Иллюстрация для упаковки и варианты отступов приложения разработаны специально для этого примера. ### Семантические роли текста и статусов по умолчанию | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --color-body | var(--color-gray-600) | Обычный пояснительный текст. | | --color-body-subtle | var(--color-gray-500) | Вспомогательные описания. | | --color-heading | var(--color-gray-900) | Заголовки и выделенные метки. | | --color-fg-brand | var(--color-blue-700) | Цвет текста бренда. | | --color-fg-success | var(--color-emerald-700) | Цвет текста статуса успеха. | | --color-fg-danger | var(--color-rose-700) | Цвет текста статуса ошибки. | | --color-fg-warning | var(--color-orange-900) | Цвет текста статуса предупреждения. | | --color-fg-disabled | var(--color-gray-400) | Цвет текста отключённых элементов. | ### Поверхности и границы по умолчанию | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --color-neutral-primary | var(--color-white) | Поверхность карточки и панели. | | --color-neutral-secondary | var(--color-gray-50) | Фон страницы. | | --color-neutral-tertiary | var(--color-gray-100) | Дорожка индикатора прогресса. | | --color-brand | var(--color-blue-700) | Основное действие и индикатор собранного. | | --color-brand-soft | var(--color-blue-100) | Контур фокуса или мягкая поверхность бренда. | | --color-brand-softer | var(--color-blue-50) | Поверхность открытого раздела аккордеона и иллюстрации. | | --color-brand-strong | var(--color-blue-800) | Состояние наведения для действия. | | --color-default | var(--color-gray-200) | Стандартная граница компонента. | | --color-success-soft | var(--color-emerald-50) | Поверхность локального результата. | ### Геометрия и переменные шрифтов по умолчанию | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --font-sans | 'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' | Стек интерфейса с приоритетом Inter; в предварительном просмотре используется доступный системный шрифт, удалённые шрифты не загружаются. | | --font-mono | 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace' | Стек моноширинных шрифтов. | | --radius-xxs | 2px | Радиус два пикселя. | | --radius-xs | 4px | Радиус четыре пикселя. | | --radius-sm | 6px | Радиус шесть пикселей. | | --radius | 8px | Радиус восемь пикселей. | | --radius-base | 12px | Радиус панели в двенадцать пикселей, используемый классом rounded-base. | | --radius-lg | 16px | Радиус шестнадцать пикселей. | | --default-border-width | 1px | Границы толщиной один пиксель. | | --leading-5 | 20px | Межстрочный интервал двадцать пикселей. | | --leading-6 | 24px | Межстрочный интервал двадцать четыре пикселя. | ### Значения компоновки Tailwind, используемые в примере | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | p-6 / md:p-10 | 1.5rem / 2.5rem | Отступ страницы задан стандартной четвертью rem из шкалы интервалов Tailwind. | | gap-8 | 2rem | Расстояние между категориями упаковки и сводкой прогресса. | | md breakpoint | 48rem | Переключение на две колонки. | | text-sm / text-xl / text-3xl | 0.875rem / 1.25rem / 1.875rem | Классы для основного текста, заголовка раздела и заголовка страницы. | | w-96 / max-w-full | 24rem / 100% | Ширина панели не выходит за пределы мобильного окна просмотра. | ## Полное руководство по дизайн-системе Flowbite Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса. Подробные рекомендации, отправная точка для реализации и ссылки на источники. ## Дизайн-система 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 обновляются по тому же количеству; отдельный счётчик не может рассинхронизироваться со списком. Бумага для черчения и калька — отдельные пункты, поскольку их подготовка различается. Коврик для резки предназначен для общей рабочей станции, а для малярной ленты с низкой адгезией приведено предупреждение о поверхности стены. Благодаря таким конкретным деталям раскрытая категория становится полезной, а аккордеон не просто скрывает повторяющиеся общие абзацы. 1. Откройте раздел «Бумага» и отметьте, что бумага для черчения собрана. 2. Откройте раздел «Инструменты», отметьте, что карандаши и маркеры собраны, а затем вернитесь в раздел «Бумага». 3. Убедитесь, что оба пункта остались отмеченными, а в сводке указано «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. При изменении списка результат сбрасывается, поскольку прежнее количество иначе могло бы ввести в заблуждение. Прочитать вспомогательную спецификацию ## Дизайн-система Flowbite: добавьте классы, созданные библиотекой JavaScript ### Добавьте классы, созданные библиотекой JavaScript Входной файл Tailwind подключает тему Flowbite по умолчанию и регистрирует flowbite/plugin. Директивы source явно указывают на HTML, модуль приложения и ESM-библиотеку Flowbite. Последний источник особенно важен: классы, которые библиотека добавляет во время выполнения, должны попасть в создаваемую таблицу стилей, даже если их нет в исходном HTML. Пакет импортирует Accordion и Drawer из flowbite. В примере каждый экземпляр инициализируется один раз после появления соответствующей разметки. В приложениях на фреймворках, где представления монтируются и размонтируются, настройку жизненного цикла следует сочетать с очисткой экземпляров, чтобы избежать дублирующихся обработчиков. На локальной странице есть одно монтирование и нет переходов между маршрутами на стороне клиента. Прочитать вспомогательную спецификацию ## Дизайн-система Flowbite: руководство по сбору вещей с чёткими границами реализации ### Вспомогательное средство для упаковки с чёткими границами реализации Это практическое руководство показывает аккордеон с большим объёмом текста, сохранение состояния флажков и сценарий работы с оверлеем. В нём нет вымышленных данных о наличии товаров или результатов удалённого оформления закупки. Все шесть материалов — примеры задач по подготовке мастерской, а сохранённая заметка остаётся в памяти на время работы страницы. Семантическая тема по умолчанию, классы компонентов и поведение JavaScript предоставляются Flowbite; содержимое о мастерской, оригинальная иллюстрация и дополнение для управления фокусом — это код приложения. Такое разделение позволяет использовать готовую композицию и понимать, за какие задачи действительно отвечает библиотека. - Для управления видимостью панели используйте экземпляр Flowbite с сохранением состояния. - Обрабатывайте данные контрольного списка и вычисление прогресса в логике приложения. - Подключайте реальные закупки или общее хранилище данных только через явную интеграцию с серверной частью. Прочитать вспомогательную спецификацию ## Примеры компонентов дизайн-системы Flowbite ### Разметка руководства по сбору вещей и выдвижной панели Семантические классы темы, настоящие элементы управления флажками и связанные панели аккордеона. ```

FLOWBITE · FIELD GUIDE

Pack for a day of making.

A workshop packing guide with grouped instructions and a local materials note.

Choose stocks before the session. Keep one sheet untouched as a reference.

``` Справочник по коду - Кнопки связаны с идентификаторами панелей через aria-controls. - Выдвижная панель помечена заголовком. - Индикатор выполнения показывает то же количество, что и для зрячих пользователей. ### Экземпляры Flowbite и локальное состояние Инициализация Accordion/Drawer, а также специфичные для приложения контрольный список и управление фокусом. ``` 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(); ``` Справочник по коду - Один экземпляр Accordion управляет всеми тремя категориями. - Обратные вызовы жизненного цикла Drawer блокируют фон и восстанавливают фокус. - Циклический переход по фокусу добавлен непосредственно в приложение. ### Оригинальная иллюстрация для сбора вещей и сопутствующий CSS Детали компоновки приложения, использующие стандартные утилиты. ``` body{margin:0;background:var(--color-neutral-secondary);font-family:var(--font-sans)}.category-trigger{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px;width:100%;text-align:left;font-size:15px;font-weight:600;border-bottom:1px solid var(--color-default)}.category-trigger b{font-size:11px;opacity:.6;margin-right:12px}.category-trigger:focus-visible{outline:3px solid var(--color-brand);outline-offset:-3px}.category-body{padding:20px;background:var(--color-neutral-primary);font-size:14px;line-height:1.7;border-bottom:1px solid var(--color-default)}.category-body p{margin-bottom:20px}.category-body label{display:flex;align-items:flex-start;gap:12px;margin:16px 0;cursor:pointer}.category-body small{display:block;font-size:12px;color:var(--color-body-subtle);margin-top:4px}.check{width:18px;height:18px;border:1px solid var(--color-default);border-radius:4px;margin-top:3px;color:var(--color-brand)}.kit-art{height:160px;background:var(--color-brand-softer);border-radius:var(--radius-base);position:relative;overflow:hidden}.kit-art i{position:absolute;width:110px;height:95px;background:#fff;border:1px solid var(--color-brand-medium);top:35px;left:20%;transform:rotate(-12deg)}.kit-art i:nth-child(2){left:35%;transform:rotate(10deg);background:var(--color-brand-soft)}.kit-art i:nth-child(3){width:8px;height:120px;left:70%;top:20px;transform:rotate(25deg);background:var(--color-brand)}.kit-art em{position:absolute;width:95px;height:22px;background:var(--color-brand-medium);bottom:20px;left:20%;transform:rotate(-20deg)}[hidden]{display:none!important}button{cursor:pointer}button:focus-visible{outline:3px solid var(--color-brand);outline-offset:3px}@media(max-width:600px){.category-trigger,.category-body{padding:16px}} ``` Справочник по коду - Формы листа бумаги, карандаша и линейки — оригинальный декоративный CSS. ### Полный документ index.html Используйте вместе со сборкой таблицы стилей и полным исходным кодом взаимодействия, приведёнными выше. ``` Flowbite specimen

FLOWBITE · FIELD GUIDE

Pack for a day of making.

A workshop packing guide with grouped instructions and a local materials note.

Choose stocks before the session. Keep one sheet untouched as a reference.

``` Справочник по коду - Сохраните предоставленный код взаимодействия в main.js и скомпилируйте его в bundle.js, как показано в инструкции по настройке. - Настройка области просмотра и нативная загрузка ресурсов включены. ## Настройка агента дизайн-системы Flowbite ### Отправная точка для реализации Проверено на Flowbite 4.0.2 и Tailwind CSS 4.3.3. Укажите фактический путь к input.css вместо пути к исходному коду в node_modules. Удалённые шрифты не требуются. ``` /* npm install flowbite@4.0.2 */ /* npm install -D tailwindcss@4.3.3 @tailwindcss/cli@4.3.3 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. */ ``` ### Запрос для вашего проекта ``` Используйте полное руководство Flowbite 4.0.2 по сбору вещей для мастерской, включая обнаружение исходных файлов Tailwind и инициализацию стандартных Accordion и Drawer. Свяжите сгруппированные материалы и состояние контрольного списка с руководством; перед сохранением локальной заметки проверьте сведения об ответственном. Сохраните клавиатурное управление фокусом в выдвижной панели, блокировку фона и поведение при закрытии. Не объединяйте оригинальную иллюстрацию CSS с семантической темой библиотеки. Не добавляйте в этот локальный сценарий тикеты службы поддержки или внешнюю отправку данных. ``` ## Источники и область применения дизайн-системы Flowbite Flowbite 4.0.2 с темой по умолчанию. Содержание о сборе вещей, декоративная иллюстрация и дополнение для управления фокусом — оригинальные. Заметки о материалах хранятся локально. - Официальный репозиторий Настройка для четвёртой версии и API компонента. - Исходный код темы по умолчанию Фактические семантические псевдонимы и геометрия. - Реализация Accordion Параметры экземпляра и обновление aria-expanded. - Реализация Drawer Видимость, фон-затемнение и методы жизненного цикла. - Руководство по Accordion Официальный пример композиции. - Руководство по Drawer Официальный пример API с оверлеем. - Тема Tailwind Утилиты базовых отступов и типографики. ## Связанные ресурсы дизайн-системы Flowbite ### Fomantic UI Нативная полка для чтения Fomantic UI с проверенными скомпилированными значениями темы, модулями выпадающего списка и рейтинга jQuery, явной поддержкой клавиатуры и постоянно сохраняемым локальным списком избранного. ### Foundation Рабочий стол проверки доказательств Foundation с использованием XY Grid, пользовательских валидаторов Abide, подтверждения Reveal, реальных настроек Sass и полного кода локальной интеграции. ### Framework7 Нативный альбом эскизов Framework7 с настоящими действиями swipeout, явными значениями темы iOS, доступным с клавиатуры открытием меню действий и отфильтрованным списком, в котором завершённые исследования остаются до сброса. - [Справочник по реализации](https://flowbite.com/docs/components/accordion/) - [Источник](https://github.com/themesberg/flowbite/blob/main/src/themes/default.css) - [Источник](https://tailwindcss.com/docs/theme) - [Прочитать вспомогательную спецификацию](https://flowbite.com/docs/getting-started/quickstart/) - [Прочитать вспомогательную спецификацию](https://flowbite.com/docs/components/accordion/) - [Прочитать вспомогательную спецификацию](https://flowbite.com/docs/forms/checkbox/) - [Прочитать вспомогательную спецификацию](https://flowbite.com/docs/components/drawer/) - [Прочитать вспомогательную спецификацию](https://flowbite.com/docs/forms/input-field/) - [Прочитать вспомогательную спецификацию](https://flowbite.com/docs/getting-started/javascript/) - [Справочник по коду](https://flowbite.com/docs/components/accordion/) - [Справочник по коду](https://flowbite.com/docs/components/drawer/) - [Справочник по коду](https://flowbite.com/docs/customize/colors/) - [Справочник по коду](https://flowbite.com/) - [Официальный репозиторий Настройка для четвёртой версии и API компонента.](https://github.com/themesberg/flowbite) - [Исходный код темы по умолчанию Фактические семантические псевдонимы и геометрия.](https://github.com/themesberg/flowbite/blob/main/src/themes/default.css) - [Реализация Accordion Параметры экземпляра и обновление aria-expanded.](https://github.com/themesberg/flowbite/blob/main/src/components/accordion/index.ts) - [Реализация Drawer Видимость, фон-затемнение и методы жизненного цикла.](https://github.com/themesberg/flowbite/blob/main/src/components/drawer/index.ts) - [Руководство по Accordion Официальный пример композиции.](https://flowbite.com/docs/components/accordion/) - [Руководство по Drawer Официальный пример API с оверлеем.](https://flowbite.com/docs/components/drawer/) - [Тема Tailwind Утилиты базовых отступов и типографики.](https://tailwindcss.com/docs/theme)