# Дизайн-система Quasar

## Предварительный просмотр интерфейса дизайн-системы Quasar

Назовите сессию, выберите формат, настройте размер группы и сохраните план, доступный только в этом интерфейсе.

## Справочник по дизайн-системе Quasar

Quasar 2.34.0 с Vue 3. Используются фактические переменные среды выполнения --q-*; значения отступов и типографики взяты из настроек Sass по умолчанию. Заголовок приложения, иллюстрации повестки и переопределение системного шрифта созданы отдельно. Material Icons локально подключены через @quasar/extras 2.1.0.

### Роли фирменных цветов Quasar по умолчанию

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --q-primary | #1976D2 | Состояние степпера, основное действие и слайдер. |
| --q-secondary | #26A69A | Вторичная роль. |
| --q-accent | #9C27B0 | Роль акцента. |
| --q-positive | #21BA45 | Роль для положительного отклика. |
| --q-negative | #C10015 | Роль для ошибок валидации. |
| --q-info | #31CCEC | Информационная роль. |
| --q-warning | #F2C037 | Роль предупреждения. |
### Встроенные помощники для отступов

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| $space-base | 16px | Базовая единица отступов Sass. |
| q-pa-xs / q-ma-xs | 4px | Четверть базового отступа. |
| q-pa-sm / q-ma-sm | 8px | Половина базового отступа. |
| q-pa-md / q-ma-md | 16px | Базовый отступ. |
| q-pa-lg / q-ma-lg | 24px | Полуторный базовый отступ. |
| q-pa-xl / q-ma-xl | 48px | Тройной базовый отступ. |
| q-mt-md | 16px top margin | Используется над переключателем удалённого участия. |
| q-ml-sm | 8px left margin | Используется между действиями навигации. |
### Встроенная шкала классов типографики

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| text-h4 | 2.125rem / 2.5rem, weight 400 | Стандартный класс оформления крупного заголовка. |
| text-h5 | 1.5rem / 2rem, weight 400 | Стандартный класс оформления заголовка раздела. |
| text-h6 | 1.25rem / 2rem, weight 500 | Стандартный класс оформления небольшого заголовка. |
| text-body1 | 1rem / 1.5rem, weight 400 | Стандартный класс оформления крупного основного текста. |
| text-body2 | 0.875rem / 1.25rem, weight 400 | Стандартный класс оформления компактного основного текста. |
| Application font | system-ui, sans-serif | Явное переопределение, добавленное отдельно; семейство шрифтов Roboto по умолчанию в Quasar здесь не загружается. |
### Контрольные точки и явная геометрия приложения

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| sm minimum | 600px | Начало встроенной контрольной точки Quasar. |
| md minimum | 1024px | Начало встроенной контрольной точки Quasar. |
| lg minimum | 1440px | Начало встроенной контрольной точки Quasar. |
| xl minimum | 1920px | Начало встроенной контрольной точки Quasar. |
| Application stack breakpoint | 740px | Созданный отдельно переход от двух колонок к вертикальному расположению. |
| Page title | 34px / 1.15; 29px mobile | Созданная отдельно иерархия текста. |
| Page gap / padding | 24px / 32px | Созданная отдельно композиция окружающих элементов. |
| Participants slider | min 2, max 16, step 1 | Фактические свойства QSlider, а не только визуальное оформление ползунка. |
## Полное руководство по дизайн-системе Quasar

Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса.

Подробные рекомендации, отправная точка для реализации и ссылки на источники.

## Компоненты дизайн-системы 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, поэтому в работающем примере фактическое ограничение задано напрямую.

При некорректной попытке отображается ошибка поля, и пользователь остаётся на первом шаге. После исправления ввода та же кнопка «Продолжить» позволяет перейти дальше. Ограничение в шестьдесят символов и видимый счётчик помогают уложить название в план, а встроенное правило объясняет, почему нельзя продолжить с пустым или слишком коротким названием.

1. Отправьте первый шаг с пустым названием, чтобы увидеть сообщение о проверке.

2. Введите содержательное название и выберите формат сессии.

3. Нажмите «Продолжить», затем вернитесь кнопкой «Назад», чтобы проверить, что введённые значения сохраняются при навигации.

Прочитать вспомогательную спецификацию

## В дизайн-системе 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.

Прочитать вспомогательную спецификацию

## Примеры компонентов дизайн-системы Quasar

### Полный сценарий работы с пошаговой формой

QStepper/QStep, QForm/QInput, QOptionGroup, QSlider, QToggle и вычисляемое расписание.

```
<script setup>
import {ref,computed} from 'vue';import {QStepper,QStep,QStepperNavigation,QForm,QInput,QOptionGroup,QSlider,QToggle,QBtn,QCard,QCardSection,QBadge,QBanner} from 'quasar';
const step=ref(1),title=ref(''),format=ref('critique'),people=ref(8),remote=ref(false),saved=ref(false),form=ref();const formats=[{label:'Design critique',value:'critique'},{label:'Sketching session',value:'sketch'},{label:'Research synthesis',value:'research'}];const names={critique:'Design critique',sketch:'Sketching session',research:'Research synthesis'};const agenda=computed(()=>format.value==='critique'?[['10 min','Set the question'],['25 min','Review the work'],['10 min','Choose next actions']]:format.value==='sketch'?[['5 min','Frame the prompt'],['25 min','Sketch independently'],['15 min','Compare directions']]:[['10 min','Sort observations'],['20 min','Name the patterns'],['15 min','Record open questions']]);async function next(){if(await form.value.validate())step.value=2;}function reset(){step.value=1;title.value='';format.value='critique';people.value=8;remote.value=false;saved.value=false;}
</script>
<template><main class="session-builder"><header><div><p class="eyebrow">QUASAR · GUIDED WORKFLOW</p><h1>Make time for better work.</h1><p class="intro">Build a small session brief with a native stepper, validated fields and a live agenda.</p></div><QBadge color="primary" label="45 MINUTES"/></header><div class="builder-grid"><QStepper v-model="step" vertical color="primary" animated flat bordered class="session-stepper"><QStep :name="1" prefix="1" title="Name the session" caption="Purpose and format" :done="step>1"><QForm ref="form" @submit="next"><QInput v-model="title" outlined label="Session title" maxlength="60" counter lazy-rules :rules="[v=>v.trim().length>=5||'Use at least five non-space characters.']"/><p class="field-label">Session format</p><QOptionGroup v-model="format" :options="formats" color="primary"/><QStepperNavigation><QBtn color="primary" label="Continue" type="submit" no-caps/></QStepperNavigation></QForm></QStep><QStep :name="2" prefix="2" title="Shape the group" caption="People and participation" :done="step>2"><p class="field-label">Participants: <strong>{{people}}</strong></p><QSlider v-model="people" :min="2" :max="16" :step="1" label color="primary" aria-label="Participants"/><QToggle v-model="remote" label="Include remote participants" color="primary" class="q-mt-md"/><p class="hint">{{remote?'Reserve a shared board and a facilitator for the remote group.':'Use one shared table and keep the work visible to everyone.'}}</p><QStepperNavigation><QBtn color="primary" label="Review brief" no-caps @click="step=3"/><QBtn flat label="Back" no-caps class="q-ml-sm" @click="step=1"/></QStepperNavigation></QStep><QStep :name="3" prefix="3" title="Review the brief" caption="Save a local snapshot"><p class="review-title">{{title.trim()}}</p><p>{{names[format]}} · {{people}} people · {{remote?'Hybrid':'In person'}}</p><p class="hint">The agenda totals 45 minutes. Saving does not create a calendar event or invite anyone.</p><QStepperNavigation><QBtn color="primary" :label="saved?'Saved locally':'Save local brief'" :disable="saved" no-caps @click="saved=true"/><QBtn flat label="Back" no-caps class="q-ml-sm" :disable="saved" @click="step=2"/></QStepperNavigation><QBanner v-if="saved" rounded class="bg-green-1 text-green-10 q-mt-lg" role="status">Local brief saved for {{people}} people. No invitation was sent.<template #action><QBtn flat label="Start another" no-caps @click="reset"/></template></QBanner></QStep></QStepper><QCard flat bordered class="agenda-card"><QCardSection><p class="eyebrow">LIVE AGENDA</p><h2>{{title.trim()||'Your next working session'}}</h2><p class="agenda-format">{{names[format]}}</p><div class="time-art" aria-hidden="true"><i></i><i></i><i></i><span>45′</span></div><ol class="agenda-list"><li v-for="row in agenda" :key="row[1]"><span>{{row[0]}}</span><strong>{{row[1]}}</strong></li></ol><div class="session-meta"><span>{{people}} participants</span><span>{{remote?'Hybrid setup':'One shared table'}}</span></div><p class="local-note">Original sample agenda. Quasar supplies the form and navigation components.</p></QCardSection></QCard></div></main></template>
```

Справочник по коду

- Перед первым переходом выполняется QForm.validate().

- Правило для заголовка проверяет значимую длину текста после удаления пробелов по краям.

- На шаге проверки событие в календаре не создаётся.

### Исходная структура расписания

Адаптивный макет и декоративная иллюстрация времени вокруг встроенных компонентов Quasar.

```
html,body{height:auto;min-height:0}body{background:#f3f5f8;font-family:system-ui,sans-serif}.session-builder{max-width:1120px;padding:32px;margin:auto}header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:32px}.eyebrow{font-size:11px;font-weight:650;letter-spacing:.13em;color:#5c6c80}h1{font-size:34px;line-height:1.15;font-weight:650;margin:14px 0;letter-spacing:-.02em}.intro{font-size:15px;line-height:1.7;max-width:610px;color:#5c6c80}.builder-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:start}.field-label{font-size:14px;font-weight:600;margin:20px 0 8px}.hint,.local-note{font-size:12px;line-height:1.7;color:#647187}.review-title{font-size:20px;font-weight:650;line-height:1.4}.agenda-card .q-card__section{padding:24px}.agenda-card h2{font-size:25px;line-height:1.25;font-weight:600;margin:16px 0 8px;letter-spacing:0}.agenda-format{font-size:14px;color:#647187}.time-art{height:140px;background:#e6eef8;border-radius:6px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;margin:24px 0}.time-art i{position:absolute;width:130px;height:130px;border:18px solid #8db8e8;border-radius:50%;left:10%;top:45%}.time-art i:nth-child(2){border-color:#c1d7ef;width:170px;height:170px;left:35%;top:-30%}.time-art i:nth-child(3){border-color:#d8e5f5;width:150px;height:150px;left:65%;top:40%}.time-art span{font-size:45px;font-weight:700;position:relative;color:#175a9e}.agenda-list{list-style:none;padding:0;margin:0}.agenda-list li{display:grid;grid-template-columns:65px 1fr;gap:16px;border-bottom:1px solid #dfe5ec;padding:16px 0;font-size:14px}.agenda-list span{color:#657991;font-size:12px}.agenda-list strong{font-weight:600}.session-meta{display:flex;justify-content:space-between;gap:12px;margin:24px 0;font-size:12px;color:#5c6c80}.local-note{margin-bottom:0}@media(max-width:740px){.session-builder{padding:24px 14px}header{flex-direction:column;gap:4px}h1{font-size:29px}.builder-grid{grid-template-columns:1fr}.session-stepper .q-stepper__step-inner{padding-right:18px}.agenda-card .q-card__section{padding:22px}}
```

Справочник по коду

- Для встраивания используется высота содержимого страницы.

- Переопределение шрифта приложения задано явно.

## Настройка агента дизайн-системы Quasar

### Отправная точка для реализации

Проверена совместимость Quasar 2.34.0 и @quasar/extras 2.1.0 с Vue 3. Для стандартных индикаторов шагов требуется локальный файл шрифта значков.

```
// 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 quasar@2.34.0 @quasar/extras@2.1.0
// 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
```

### Запрос для вашего проекта

```
Используйте Quasar 2.34.0 и предоставленный сценарий планирования с пошаговыми инструкциями. Сохраните QStepper, QForm и проверку QInput, переключатели формата сессии, ползунок числа участников и переключатель расписания. Дождитесь завершения проверки формы перед переходом, сохраняйте введённые значения при возврате назад и формируйте сводку на шаге проверки из этих же значений. Сохранение записывает план локально; последующие изменения сбрасывают его статус сохранения. Подключите таблицу стилей Quasar и локальные Material Icons. Узкий макет должен оставаться удобным для использования; не добавляйте вымышленные службы диспетчеризации или бронирования.
```

## Источники и границы применения дизайн-системы Quasar

Quasar 2.34.0 со встроенными компонентами и локальными Material Icons. Расписания и иллюстрации созданы специально для примера. Сохранение не создаёт событие в календаре и не отправляет приглашения.

- Пошаговая форма Состояние шагов, навигация и доступность.

- Form Проверка внутренних правил и отправка формы.

- Поле ввода Метки, счётчик и правила проверки.

- Группа вариантов Взаимоисключающие варианты формата.

- Slider Управление с клавиатуры и указателем для ввода чисел.

- Цвета Роли бренда во время выполнения.

- Интервалы Синтаксис встроенных помощников интервалов.

- Типографика Утилиты стандартной типографики.

- Интеграция Справочник по интеграции Vue/Vite.

## Quasar: связанные ресурсы дизайн-системы

### React Native Elements

Создайте полноценный конструктор плана концентрации с React Native Elements 5.0.0: реальные роли темы, управляемые поля ввода и варианты выбора, проверка данных, локальное подтверждение и протестированная веб-сборка.

### React Suite

Встроенный календарь проверок React Suite с проверенными переменными CSS для v6, маркерами ячеек дат, программой выбранного дня, проверкой в модальном окне и явно заданными правилами локального планирования.

### Skeleton

Сравните настоящие темы Cerberus, Mint и Rose из Skeleton 5.0.1 на примере полноценного рабочего места для чтения: изучите токены в реальном времени, сочетания тёмных поверхностей и состояние, которое можно отменить.


- [Справочник по реализации](https://quasar.dev/vue-components/stepper/)
- [Источник](https://quasar.dev/style/color-palette/)
- [Источник](https://quasar.dev/style/spacing/)
- [Источник](https://quasar.dev/style/typography/)
- [Источник](https://quasar.dev/style/breakpoints/)
- [Прочитать вспомогательную спецификацию](https://quasar.dev/start/vite-plugin/)
- [Прочитать вспомогательную спецификацию](https://quasar.dev/style/color-palette/)
- [Прочитать вспомогательную спецификацию](https://quasar.dev/style/spacing/)
- [Прочитать вспомогательную спецификацию](https://quasar.dev/vue-components/stepper/)
- [Прочитать вспомогательную спецификацию](https://quasar.dev/vue-components/form/)
- [Прочитать вспомогательную спецификацию](https://quasar.dev/vue-components/option-group/)
- [Прочитать вспомогательную спецификацию](https://quasar.dev/vue-components/banner/)
- [Справочник по коду](https://quasar.dev/vue-components/stepper/)
- [Справочник по коду](https://quasar.dev/style/spacing/)
- [Пошаговая форма Состояние шагов, навигация и доступность.](https://quasar.dev/vue-components/stepper/)
- [Form Проверка внутренних правил и отправка формы.](https://quasar.dev/vue-components/form/)
- [Поле ввода Метки, счётчик и правила проверки.](https://quasar.dev/vue-components/input/)
- [Группа вариантов Взаимоисключающие варианты формата.](https://quasar.dev/vue-components/option-group/)
- [Slider Управление с клавиатуры и указателем для ввода чисел.](https://quasar.dev/vue-components/slider/)
- [Цвета Роли бренда во время выполнения.](https://quasar.dev/style/color-palette/)
- [Интервалы Синтаксис встроенных помощников интервалов.](https://quasar.dev/style/spacing/)
- [Типографика Утилиты стандартной типографики.](https://quasar.dev/style/typography/)
- [Интеграция Справочник по интеграции Vue/Vite.](https://quasar.dev/start/vite-plugin/)