Кроссплатформенный и мобильный интерфейс · Новый ресурс
Дизайн-система Quasar.
Встроенный пошаговый сценарий Quasar с фактическими значениями бренда и отступов, проверкой QForm, конструктором брифов из трёх шагов, выбором формата через переключатели и динамической программой на сорок пять минут.
Quasar 2.34.0 с Vue 3 и локально подключёнными Material Icons из @quasar/extras 2.1.0. · Справочник по реализации
02
Справочник по дизайн-системе Quasar
Quasar 2.34.0 с Vue 3. Используются фактические переменные среды выполнения --q-*; значения отступов и типографики взяты из настроек Sass по умолчанию. Заголовок приложения, иллюстрации повестки и переопределение системного шрифта созданы отдельно. Material Icons локально подключены через @quasar/extras 2.1.0.
Компоненты дизайн-системы Quasar позволяют создать полноценный пошаговый сценарий
Компоненты дизайн-системы Quasar позволяют создать полноценный пошаговый сценарий
Quasar предоставляет компоненты Vue, а также помощники для стилизации и фреймворк приложения. В этом примере компоненты используются напрямую в точке входа Vue 3: встроенный степпер управляет формой, группой радиокнопок, слайдером, переключателем и итоговым подтверждением. Для демонстрации этих элементов управления не требуется создавать полноэкранную оболочку QLayout.
План сессии решает конкретную задачу: выбрать рабочий формат и параметры группы, одновременно просматривая соответствующую повестку. Библиотека компонентов предоставляет элементы управления и состояния навигации; три оригинальные повестки и их общая продолжительность в сорок пять минут — это содержимое приложения. Наличие сервиса планирования не подразумевается.
В дизайн-системе Quasar сосуществуют переменные фирменных цветов и именованные классы палитры
Переменные фирменных цветов и именованные классы палитры сосуществуют
В проверенной таблице стилей по умолчанию значение среды выполнения --q-primary равно #1976D2. Компонентам QStepper, QBtn и QSlider передаётся color="primary", поэтому их основное оформление соответствует этой роли. Secondary, accent, positive, negative, info и warning остаются отдельными именованными ролями, а не произвольно выбранными цветами для каждого элемента управления.
В баннере об успешном сохранении используются именованные классы зелёной палитры для светлого фона и тёмного текста. Отдельное текстовое сообщение также сообщает об успехе, а не полагается только на цвет. Иллюстрация с синим кольцом создана отдельно как декоративный элемент и скрыта от вспомогательных технологий; она не обозначает дополнительное состояние формы.
В дизайн-системе Quasar буквальное значение суффиксов отступов
Буквальное значение суффиксов отступов Quasar
Классы отступов Quasar состоят из типа, направления и размера. q-mt-md задаёт верхний отступ среднего размера; q-ml-sm добавляет небольшой отступ слева. Базовая величина по умолчанию — шестнадцать пикселей: xs — четыре, sm — восемь, md — шестнадцать, lg — двадцать четыре, xl — сорок восемь. Увеличение до xl составляет три базовые единицы, а не приблизительно выбранные тридцать два пикселя.
В элементах управления используются встроенные помощники отступов, а для общей композиции — созданные отдельно CSS. В стандартных классах типографики text-body2 соответствует размеру 0.875rem, а text-h5 — 1.5rem. Оригинальный заголовок страницы имеет размер тридцать четыре пикселя; на странице явно задан шрифт system-ui, а Material Icons сохранены для встроенных значков компонентов.
В дизайн-системе Quasar степпер сам по себе не проверяет форму
Степпер сам по себе не проверяет форму
QStepper хранит номер текущего шага и содержит три именованных секции QStep. Шаг отмечается как выполненный только после перехода к следующему. В обоих вариантах макета используется вертикальная ориентация: она сохраняет понятную последовательность, не пытаясь уместить три горизонтальных заголовка на экране телефона.
Первое действие «Продолжить» относится к QForm. Обработчик дожидается завершения validate и только затем устанавливает второй шаг. Переход по заголовкам отключён, поэтому щелчок по заголовку будущего шага не обойдёт проверку. При возврате назад значения названия, формата и размера группы сохраняются: соответствующие модели находятся в родительском SFC и не удаляются вместе с полем, исключённым из DOM.
В дизайн-системе Quasar QForm использует внутренние правила, а не все встроенные ограничения
QForm использует внутренние правила, а не все встроенные ограничения
Для QInput названия задан массив внутренних правил: он удаляет пробелы по краям и требует не менее пяти значимых символов. Это правило учитывается при вызове QForm.validate. Одних атрибутов required или email недостаточно для программного вызова validate, поэтому в работающем примере фактическое ограничение задано напрямую.
При некорректной попытке отображается ошибка поля, и пользователь остаётся на первом шаге. После исправления ввода та же кнопка «Продолжить» позволяет перейти дальше. Ограничение в шестьдесят символов и видимый счётчик помогают уложить название в план, а встроенное правило объясняет, почему нельзя продолжить с пустым или слишком коротким названием.
Отправьте первый шаг с пустым названием, чтобы увидеть сообщение о проверке.
Введите содержательное название и выберите формат сессии.
Нажмите «Продолжить», затем вернитесь кнопкой «Назад», чтобы проверить, что введённые значения сохраняются при навигации.
В дизайн-системе Quasar радиокнопки, слайдер и переключатель отвечают за разные решения
Радиокнопки, слайдер и переключатель отвечают за разные решения
QOptionGroup позволяет выбрать один из вариантов: «Разбор дизайна», «Скетч-сессия» или «Синтез исследований». При смене варианта выбирается соответствующий массив повестки. Длина повесток задана в примере и не меняется, поэтому при смене формата обновляются названия пунктов, а общая продолжительность остаётся равной сорока пяти минутам.
QSlider задаёт целое число участников от двух до шестнадцати. QToggle указывает, будут ли участвовать люди удалённо. Подсказка рядом меняется: от одного общего стола к общей доске и удалённому фасилитированию. Эти элементы управления изменяют отображаемый план, а не служат изолированными демонстрационными виджетами.
В дизайн-системе Quasar итоговый шаг сохраняет результат локально до сброса
Итоговый шаг сохраняет результат локально до сброса
На шаге проверки повторно отображаются название без пробелов по краям, формат, число участников и способ участия. После сохранения устанавливается локальный флаг, кнопки «Сохранить» и «Назад» отключаются, а на баннере указывается размер группы. Кнопка «Начать заново» очищает все модели и возвращает к первому шагу, благодаря чему в примере можно пройти весь сценарий.
Запросы к календарю или сервису обмена сообщениями API не отправляются. В баннере прямо указано, что приглашение не отправлено; в тексте проверки уточняется, что сохранение не создаёт событие. Чтобы планировщик в рабочем окружении мог сообщать об этом, ему потребуются дата, часовой пояс, получатели и настоящий ответ серверной части.
В дизайн-системе Quasar используйте семантику встроенных компонентов и реальные проверки фокуса
Используйте семантику встроенных компонентов и реальные проверки фокуса
Встроенные элементы управления предоставляют роли переключателя, ползунка и тумблера. Ползунок имеет метку «Участники», а у поля заголовка есть видимая метка и сообщение об ошибке проверки. Пошаговая форма указывает текущий шаг и обозначает его содержимое названием шага. Декоративная иллюстрация исключена из последовательности чтения средствами доступности.
В ходе локального тестирования ползунок перемещали с клавиатуры, включали и отключали удалённое участие, проходили проверку и сохраняли гибридный план на девять человек. Также проверили узкую версию макета. Статичное изображение пошаговой формы не демонстрирует эти связи и не доказывает, что переход действительно зависит от проверки.
Синхронизируйте активный шаг и заголовок его содержимого.
Перед изменением модели шагов выполняйте проверку по правилам.
Используйте статусный баннер с точным описанием результата локальной операции.
Подключите дизайн-систему Quasar и ожидаемый набор значков CSS
Подключите Quasar CSS и необходимый набор значков
В точке входа импортируется Quasar, регистрируется его плагин, подключается quasar/dist/quasar.css и импортируется таблица стилей Material Icons из @quasar/extras. В SFC импортируются используемые компоненты. Локальная сборка включает файлы шрифта значков, поэтому галочки и индикаторы редактирования отображаются без запросов к удалённому шрифту.
В исходной таблице стилей используется Quasar CSS, а высота документа сбрасывается до высоты содержимого для встраивания. Глобальные стили для всех встроенных компонентов не переопределяются, и новая шкала интервалов не создаётся. Полноценное приложение на основе CLI или Vite-плагина Quasar может использовать стандартную интеграцию сборки; в этом полном примере те же компоненты показаны в небольшом приложении Vue.
Для встраивания используется высота содержимого страницы.
Переопределение шрифта приложения задано явно.
04
Настройка агента дизайн-системы Quasar
Отправная точка для реализации
Проверена совместимость Quasar 2.34.0 и @quasar/extras 2.1.0 с Vue 3. Для стандартных индикаторов шагов требуется локальный файл шрифта значков.
javascript
// Create the project first:
// npm create vite@latest quasar-specimen -- --template vue
// cd quasar-specimen && npm install
// In a Vite Vue 3 project:
// npm install [email protected] @quasar/[email protected]
// Save the complete SFC as App.vue and layout as style.css.
import {createApp} from 'vue';
import {Quasar} from 'quasar';
import 'quasar/dist/quasar.css';
import '@quasar/extras/material-icons/material-icons.css';
import './style.css';
import App from './App.vue';
createApp(App).use(Quasar, {plugins: {}}).mount('#app');
// index.html contains <div id="app"></div>.
// Components are explicitly imported in App.vue; no auto-import plugin is required here.
// Keep the template index.html and replace its entry with the code above.
// npm run dev
Запрос для вашего проекта
Промпт для AI-агента
Используйте Quasar 2.34.0 и предоставленный сценарий планирования с пошаговыми инструкциями. Сохраните QStepper, QForm и проверку QInput, переключатели формата сессии, ползунок числа участников и переключатель расписания. Дождитесь завершения проверки формы перед переходом, сохраняйте введённые значения при возврате назад и формируйте сводку на шаге проверки из этих же значений. Сохранение записывает план локально; последующие изменения сбрасывают его статус сохранения. Подключите таблицу стилей Quasar и локальные Material Icons. Узкий макет должен оставаться удобным для использования; не добавляйте вымышленные службы диспетчеризации или бронирования.
05
Источники и границы применения дизайн-системы Quasar
Quasar 2.34.0 со встроенными компонентами и локальными Material Icons. Расписания и иллюстрации созданы специально для примера. Сохранение не создаёт событие в календаре и не отправляет приглашения.
