# Sistema de design Quasar

## Prévia da interface do sistema de design Quasar

Dê um nome à sessão, escolha um formato, ajuste o tamanho do grupo e salve um briefing claramente local.

## Referência de design do sistema de design Quasar

Quasar 2.34.0 com Vue 3. As cores são variáveis de execução reais --q-*; as referências de espaçamento e tipografia vêm dos padrões Sass. O título da aplicação, a ilustração da agenda e a substituição da fonte do sistema são originais. Material Icons é fornecido localmente por meio de @quasar/extras 2.1.0.

### Funções padrão da marca do Quasar

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --q-primary | #1976D2 | Estado do Stepper, ação principal e slider. |
| --q-secondary | #26A69A | Função secundária. |
| --q-accent | #9C27B0 | Papel de destaque. |
| --q-positive | #21BA45 | Função de feedback positivo. |
| --q-negative | #C10015 | Papel de validação/erro. |
| --q-info | #31CCEC | Função informativa. |
| --q-warning | #F2C037 | Função de aviso. |
### Utilitários nativos de espaçamento

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| $space-base | 16px | Unidade base de espaçamento do Sass. |
| q-pa-xs / q-ma-xs | 4px | Espaçamento baseado em quartos da unidade. |
| q-pa-sm / q-ma-sm | 8px | Espaçamento de meia unidade base. |
| q-pa-md / q-ma-md | 16px | Espaçamento base. |
| q-pa-lg / q-ma-lg | 24px | Espaçamento de uma unidade e meia base. |
| q-pa-xl / q-ma-xl | 48px | Espaçamento de três unidades base. |
| q-mt-md | 16px top margin | Usado acima do toggle de participação remota. |
| q-ml-sm | 8px left margin | Usado entre ações de navegação. |
### Escala nativa de classes tipográficas

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| text-h4 | 2.125rem / 2.5rem, weight 400 | Utilitário para o título de exibição padrão. |
| text-h5 | 1.5rem / 2rem, weight 400 | Utilitário padrão para título de seção. |
| text-h6 | 1.25rem / 2rem, weight 500 | Utilitário padrão para título pequeno. |
| text-body1 | 1rem / 1.5rem, weight 400 | Utilitário padrão para texto do corpo grande. |
| text-body2 | 0.875rem / 1.25rem, weight 400 | Utilitário padrão para texto compacto. |
| Application font | system-ui, sans-serif | Substituição original explícita; a família Roboto padrão do Quasar não é baixada aqui. |
### Pontos de interrupção e geometria explícita da aplicação

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| sm minimum | 600px | Início do breakpoint nativo de Quasar. |
| md minimum | 1024px | Início do breakpoint nativo de Quasar. |
| lg minimum | 1440px | Início do breakpoint nativo de Quasar. |
| xl minimum | 1920px | Início do breakpoint nativo de Quasar. |
| Application stack breakpoint | 740px | Transição original de duas colunas para layout empilhado. |
| Page title | 34px / 1.15; 29px mobile | Hierarquia tipográfica original. |
| Page gap / padding | 24px / 32px | Composição original ao redor. |
| Participants slider | min 2, max 16, step 1 | Propriedades reais do QSlider; não é apenas um controle deslizante visual. |
## Quasar Guia completo do sistema de design

Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real.

Orientações completas, um ponto de partida para a implementação e links para o código-fonte.

## Quasar Os componentes do sistema de design permitem criar uma tarefa guiada completa

### Quasar Componentes podem criar uma tarefa guiada completa

> Quasar oferece componentes Vue, além de auxiliares de estilo e uma estrutura de aplicação. Este exemplo usa os componentes diretamente em uma entrada Vue 3: um stepper nativo coordena um formulário, um grupo de opções, um controle deslizante, um botão de alternância e uma confirmação final. Não é necessário usar uma estrutura QLayout em tela cheia apenas para demonstrar esses controles.

O briefing da sessão tem um objetivo específico: escolher um formato de trabalho e a configuração do grupo enquanto se consulta a agenda correspondente. A biblioteca de componentes fornece os controles e os estados de navegação; as três agendas originais e sua duração total de 45 minutos são conteúdo da aplicação. Não há indicação de um serviço de agendamento.

Consulte a especificação de apoio

## As variáveis de marca do sistema de design Quasar coexistem com classes de paleta nomeadas

### Variáveis da marca e classes nomeadas da paleta coexistem

O valor de --q-primary em tempo de execução é #1976D2 na folha de estilos padrão verificada. QStepper, QBtn e QSlider recebem color="primary", portanto seus estilos primários seguem essa função. Secondary, accent, positive, negative, info e warning continuam sendo funções nomeadas distintas, em vez de cores escolhidas ad hoc para cada controle.

O banner de confirmação usa classes utilitárias nomeadas da paleta verde para criar uma superfície clara e texto escuro. A mensagem explícita comunica o sucesso, além da cor. A ilustração de anéis azuis é uma arte decorativa original e fica oculta para tecnologias assistivas; ela não representa um estado adicional do formulário.

Consulte a especificação de apoio

## Sistema de design Quasar: interprete literalmente os sufixos de espaçamento Quasar

### Interprete literalmente os sufixos de espaçamento de Quasar

As classes de espaçamento Quasar combinam tipo, direção e tamanho. q-mt-md significa margem superior no valor médio; q-ml-sm adiciona uma margem esquerda pequena. A base padrão é de dezesseis pixels, com xs em quatro, sm em oito, md em dezesseis, lg em vinte e quatro e xl em quarenta e oito. O salto para xl equivale a três unidades da base, não a um passo presumido de trinta e dois pixels.

A página usa estes auxiliares nativos nos controles e o original CSS para a composição mais ampla. Os utilitários de tipografia padrão incluem text-body2 em 0.875rem e text-h5 em 1.5rem. O título original da página tem 34 pixels, e a página define explicitamente a fonte como system-ui, mantendo Material Icons para os glifos dos componentes nativos.

Consulte a especificação de apoio

## Sistema de design Quasar: um stepper não valida o formulário por si só

### Um Stepper não valida o formulário por si só

QStepper mantém o número da etapa atual e contém três seções QStep identificadas pelo nome. Uma etapa só é marcada como concluída depois que a navegação avança além dela. O exemplo usa a orientação vertical nos dois layouts, mantendo uma sequência clara sem comprimir três cabeçalhos horizontais em uma tela de celular.

A primeira ação Continuar pertence ao QForm. O manipulador aguarda a validação antes de definir a etapa dois. A navegação pelo cabeçalho não está habilitada, portanto clicar em um título de etapa futura não permite contornar essa validação. As ações Voltar preservam intencionalmente os valores de título, formato e grupo, pois esses modelos ficam no SFC pai, e não em um campo desmontado.

Consulte a especificação de apoio

## O QForm do sistema de design Quasar usa regras internas, não todas as restrições nativas

### O QForm usa regras internas, não todas as restrições nativas

O QInput de título tem um array interno de regras que remove espaços em branco no início e no fim e exige cinco caracteres significativos. Essa regra participa de QForm.validate. Usar apenas o atributo nativo required ou email não substitui a regra ao chamar validate programaticamente; por isso, o exemplo funcional expressa diretamente a restrição real.

Uma tentativa inválida exibe o erro do campo e mantém o usuário na primeira etapa. Corrigir a entrada permite que o mesmo botão Continuar avance. O limite de 60 caracteres e o contador visível ajudam a manter o título adequado ao briefing, enquanto a regra exibida no próprio campo explica por que um título curto ou em branco não pode prosseguir.

1. Envie a primeira etapa com o título vazio para conferir a mensagem de validação.

2. Insira um título significativo e escolha um formato de sessão.

3. Prossiga e volte com Voltar para confirmar que os valores inseridos são mantidos durante a navegação.

Consulte a especificação de apoio

## Rádio, controle deslizante e alternância do sistema de design Quasar representam decisões diferentes

### Radio, slider e toggle representam decisões diferentes

QOptionGroup representa uma escolha entre Crítica de design, Sessão de esboço e Síntese de pesquisa. Ao mudar a opção, o array de agenda correspondente é selecionado. A duração dos itens da agenda é fixa no conteúdo de exemplo; por isso, a mudança de formato atualiza as atividades identificadas pelo nome e mantém o total de quarenta e cinco minutos.

QSlider controla um número inteiro de participantes, de dois a dezesseis. QToggle registra se participantes remotos estão incluídos. A orientação ao lado muda de uma mesa compartilhada para um quadro compartilhado e facilitação remota. Esses controles alteram o briefing exibido, em vez de funcionarem como widgets de demonstração desconectados.

Consulte a especificação de apoio

## Quasar No sistema de design, a última etapa bloqueia um resultado local até que ele seja redefinido

### A etapa final mantém um resultado local até a redefinição

A etapa de revisão repete o título ajustado, o formato, o número de participantes e o modo de participação. Salvar altera um estado local de salvamento, desativa Salvar e Voltar e revela um banner que informa o tamanho do grupo. Iniciar outro limpa todos os modelos e retorna à primeira etapa, permitindo observar o ciclo completo do exemplo.

Não há nenhuma solicitação a um calendário ou serviço de mensagens API. O banner afirma explicitamente que nenhum convite foi enviado, e o texto de revisão informa que salvar não cria um evento. Um agendador em produção precisaria de uma data, um fuso horário, destinatários e uma resposta real do backend antes de fazer essa afirmação.

Consulte a especificação de apoio

## Sistema de design Quasar: use a semântica nativa dos componentes e faça testes reais de foco

### Use a semântica nativa dos componentes e testes reais de foco

Os controles nativos fornecem as funções de rádio, controle deslizante e interruptor. O controle deslizante recebe o rótulo Participantes, e o campo de título tem um rótulo visível e uma mensagem de validação no próprio campo. O stepper identifica a etapa atual e rotula seu conteúdo com o título da etapa. O exemplo exclui as ilustrações decorativas da sequência de leitura acessível.

O teste local alterou o slider pelo teclado, ativou a participação remota, avançou após a validação e salvou um briefing híbrido para nove pessoas. Também verificou o layout estreito. Uma imagem estática de um Stepper não demonstraria essas relações nem comprovaria que a etapa de validação está conectada.

- Mantenha a etapa ativa e o título do conteúdo correspondente.

- Valide pelas regras antes de alterar o modelo de etapas.

- Use um banner de status que descreva o resultado local exato.

Consulte a especificação de apoio

## Quasar Inclusão do sistema de design Quasar CSS e o conjunto de ícones esperado por ele

### Inclua Quasar CSS e o conjunto de ícones esperado

O arquivo de entrada importa Quasar, registra o plugin, carrega quasar/dist/quasar.css e importa a folha de estilos do Material Icons de @quasar/extras. O SFC importa os componentes que utiliza. O pacote local incorpora os arquivos de fontes dos ícones, para que as marcas de seleção e os indicadores de edição sejam exibidos sem solicitar fontes remotamente.

A folha de estilos original segue Quasar CSS e ajusta a altura do documento ao conteúdo para permitir sua incorporação. Ela não reformula globalmente todos os componentes nativos nem inventa uma escala de espaçamento substituta. Uma aplicação completa com CLI do Quasar ou plugin do Vite pode usar a integração padrão de build; este exemplo completo demonstra os mesmos componentes em um pequeno ponto de entrada Vue.

Consulte a especificação de apoio

## Quasar Exemplos de componentes do sistema de design

### Fluxo completo com stepper nativo

QStepper/QStep, QForm/QInput, QOptionGroup, QSlider, QToggle e uma agenda derivada.

```
<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>
```

Referência de código

- A primeira transição aguarda QForm.validate().

- A regra do título verifica se o comprimento após remover espaços em branco é significativo.

- A etapa de revisão não cria um evento no calendário.

### Composição original da agenda

Layout responsivo e ilustração decorativa de horário ao redor de componentes nativos do 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}}
```

Referência de código

- A página usa a altura do conteúdo para incorporação.

- A substituição da fonte da aplicação é explícita.

## Configuração do agente de sistema de design Quasar

### Ponto de partida para implementação

Verificado com Quasar 2.34.0 e @quasar/extras 2.1.0 usando Vue 3. A fonte dos ícones é um recurso local obrigatório para os indicadores de etapa padrão.

```
// 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
```

### Um prompt para seu projeto

```
Use Quasar 2.34.0 e o resumo da sessão guiada fornecido. Preserve a validação de QStepper, QForm e QInput, os controles de opção de formato da sessão, o controle deslizante de participantes e a alternância da pauta. Aguarde a validação do formulário antes de avançar, mantenha os valores inseridos ao voltar e gere o resumo de revisão com base nesses mesmos valores. Salvar registra um resumo local; alterações posteriores invalidam o status de salvo. Inclua a folha de estilos de Quasar e a configuração local do Material Icons, e mantenha o layout estreito utilizável sem inventar um serviço de envio ou agendamento.
```

## Fontes e escopo do sistema de design Quasar

Quasar 2.34.0 com componentes nativos e Material Icons local. As pautas originais e as ilustrações são conteúdo de exemplo. Salvar não cria um evento no calendário nem envia convites.

- Indicador de etapas Estado das etapas, navegação e acessibilidade.

- Form Validação das regras internas e comportamento de envio.

- Input Rótulos, contador e regras.

- Grupo de opções Opções de formato mutuamente exclusivas.

- Slider Controle por teclado numérico e ponteiro.

- Cores Funções de marca em tempo de execução.

- Espaçamento Sintaxe nativa de utilitários de espaçamento.

- Tipografia Utilitários tipográficos padrão.

- Integração Referência de integração com Vue/Vite.

## Recursos relacionados ao sistema de design Quasar

### React Native Elements

Crie um compositor completo de plano de foco com React Native Elements 5.0.0: funções reais de tema, campos e seleções controlados, validação, confirmação local e uma compilação web testada.

### React Suite

Um calendário de revisão nativo do React Suite, com variáveis CSS verificadas da versão 6, marcadores nas células de data, agenda do dia selecionado, validação em modal e regras explícitas para agendamentos locais.

### Skeleton

Compare os temas Cerberus, Mint e Rose reais do Skeleton 5.0.1 em uma mesa de leitura completa, com inspeção de tokens em tempo real, combinações de superfícies escuras e estado local reversível.


- [Referência de implementação](https://quasar.dev/vue-components/stepper/)
- [Fonte](https://quasar.dev/style/color-palette/)
- [Fonte](https://quasar.dev/style/spacing/)
- [Fonte](https://quasar.dev/style/typography/)
- [Fonte](https://quasar.dev/style/breakpoints/)
- [Consulte a especificação de apoio](https://quasar.dev/start/vite-plugin/)
- [Consulte a especificação de apoio](https://quasar.dev/style/color-palette/)
- [Consulte a especificação de apoio](https://quasar.dev/style/spacing/)
- [Consulte a especificação de apoio](https://quasar.dev/vue-components/stepper/)
- [Consulte a especificação de apoio](https://quasar.dev/vue-components/form/)
- [Consulte a especificação de apoio](https://quasar.dev/vue-components/option-group/)
- [Consulte a especificação de apoio](https://quasar.dev/vue-components/banner/)
- [Referência de código](https://quasar.dev/vue-components/stepper/)
- [Referência de código](https://quasar.dev/style/spacing/)
- [Indicador de etapas Estado das etapas, navegação e acessibilidade.](https://quasar.dev/vue-components/stepper/)
- [Form Validação das regras internas e comportamento de envio.](https://quasar.dev/vue-components/form/)
- [Input Rótulos, contador e regras.](https://quasar.dev/vue-components/input/)
- [Grupo de opções Opções de formato mutuamente exclusivas.](https://quasar.dev/vue-components/option-group/)
- [Slider Controle por teclado numérico e ponteiro.](https://quasar.dev/vue-components/slider/)
- [Cores Funções de marca em tempo de execução.](https://quasar.dev/style/color-palette/)
- [Espaçamento Sintaxe nativa de utilitários de espaçamento.](https://quasar.dev/style/spacing/)
- [Tipografia Utilitários tipográficos padrão.](https://quasar.dev/style/typography/)
- [Integração Referência de integração com Vue/Vite.](https://quasar.dev/start/vite-plugin/)