Um fluxo guiado nativo do Quasar, com valores reais de marca e espaçamento, validação do QForm, um criador de brief em três etapas, opções de formato por botões de opção e uma agenda dinâmica de quarenta e cinco minutos.
Quasar 2.34.0 com Vue 3 e Material Icons incorporados localmente de @quasar/extras 2.1.0. · Referência de implementação
02
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.
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.
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.
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.
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.
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.
Envie a primeira etapa com o título vazio para conferir a mensagem de validação.
Insira um título significativo e escolha um formato de sessão.
Prossiga e volte com Voltar para confirmar que os valores inseridos são mantidos durante a navegação.
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.
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.
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.
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.
A página usa a altura do conteúdo para incorporação.
A substituição da fonte da aplicação é explícita.
04
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.
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
Um prompt para seu projeto
Prompt para agente de IA
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.
05
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.
