Um planejador de sessões nativo do Preline, com guias vinculadas, um plugin de entrada numérica com restrições, aliases de tema instalados, escalas reais do Tailwind e uma estimativa local de materiais que se atualiza conforme a sessão selecionada.
HSTabs e HSInputNumber do Preline 4.2.0 com Tailwind CSS 4.3.3 e o tema padrão do pacote. · Referência de implementação
02
Referência de design do sistema de design Preline UI
Preline npm 4.2.0 com Tailwind CSS 4.3.3; tema padrão do pacote instalado. O site de marketing e documentação pode exibir um aviso de uma versão mais recente, por isso o exemplo executável está explicitamente fixado. Os aliases do tema continuam sendo aliases; não há conversões hexadecimais presumidas.
Sistema de design Preline UI: o Preline combina marcação com utilitários e plugins de comportamento
O Preline combina marcação com utilitários e plugins de comportamento
O planejador usa dois plugins nativos do Preline: HSTabs seleciona um painel de sessão, e HSInputNumber gerencia controles de incremento e decremento com limites. As classes do Tailwind fornecem a maior parte do tratamento visual. A ilustração original da sessão e o cálculo do orçamento pertencem ao aplicativo, não a um componente fictício que faz tudo.
Essa distinção é importante ao copiar o exemplo. Instalar apenas o pacote JavaScript não compila as classes utilitárias nem fornece a marcação do aplicativo. Da mesma forma, copiar o HTML sem inicializar os plugins deixa incompleto o comportamento das abas e dos controles numéricos. A integração completa abaixo apresenta cada parte explicitamente.
Sistema de design Preline UI: acompanhe os aliases semânticos até suas funções na paleta
Acompanhe os aliases semânticos até suas funções na paleta
No tema claro padrão do pacote, --primary aponta para --color-primary-600, cuja escala primária subjacente é azul. A cor de primeiro plano primária é branca; hover, focus e active usam a função de setecentos. A aba selecionada e a ação Save compartilham essa família por meio de classes utilitárias semânticas.
Os cartões usam --card e --card-line, enquanto o campo de quantidade usa --layer e --layer-line. Manter essas funções separadas torna futuras alterações de tema mais previsíveis do que espalhar classes literais de branco e cinza por toda parte. A tabela mantém os aliases oficiais em vez de apresentar aproximações calculadas como tokens de origem.
Sistema de design Preline UI: use a escala real do Tailwind e identifique as exceções originais
Use a escala real do Tailwind e identifique as exceções originais
O título da página e a estimativa usam text-3xl, o título da sessão usa text-2xl e o texto do formulário usa text-sm. O preenchimento p-5 do cartão equivale a 1.25rem com a unidade de espaçamento padrão. A margem interna maior sm:p-8 começa no breakpoint pequeno de 640px do Tailwind, enquanto a grade original passa a uma coluna em 760px.
A folha de estilos local usa system-ui e não carrega as fontes personalizadas opcionais indicadas no arquivo de tema do Preline. Em 280px, as abas quebram em duas linhas e o cartão do grupo passa a aparecer abaixo da sessão. São escolhas deliberadas de composição do aplicativo, não uma afirmação de que todos os layouts do Preline tenham essa geometria.
Sistema de design Preline UI: mantenha os controles de abas e os painéis vinculados por IDs estáveis
Mantenha os controles de abas e os painéis vinculados por IDs estáveis
Cada aba tem um data-hs-tab que aponta para um painel único. O aria-controls da aba e o aria-labelledby do painel repetem essa relação para tecnologias assistivas. Exatamente uma aba inicial tem active e aria-selected=true, e os demais painéis começam ocultos. O HSTabs nativo atualiza esses estados conforme a navegação do usuário.
O estilo visual ativo usa hs-tab-active:bg-primary e hs-tab-active:text-primary-foreground. Essas variantes vêm de variants.css do Preline; sem essa importação, o estado selecionado pode ficar visualmente ambíguo, mesmo que o JavaScript altere as classes corretamente. O aplicativo observa as mudanças de seleção para atualizar o resumo ao lado.
Selecione a oficina de argila e confirme o título, os materiais e a duração.
Aumente o número de participantes de dois para três e confira a estimativa de $54.
Salve o plano local e, em seguida, altere uma aba para limpar a confirmação anterior.
Sistema de design Preline UI: as opções dos plugins e as restrições dos campos de entrada devem corresponder
As opções dos plugins e as restrições dos campos de entrada devem corresponder
O wrapper de quantidade define min como um, max como seis e step como um em data-hs-input-number. O campo numérico nativo repete essas restrições. Assim, tanto os botões do plugin quanto a validação do navegador usam o mesmo intervalo permitido, em vez de permitir que um número digitado contorne um limite definido apenas no manipulador do botão.
O resumo acompanha os eventos de entrada e alteração, além do callback de alteração do plugin. Uma entrada manual inválida substitui o total por um travessão e desativa o botão Salvar; o manipulador de salvamento também chama reportValidity antes de ler o valor. O limite de seis pessoas é uma restrição de planejamento de exemplo, não uma afirmação sobre disponibilidade real.
Sistema de design Preline UI: calcule com base no painel ativo, não em rótulos desatualizados
Calcule com base no painel ativo, não em rótulos desatualizados
Cada painel armazena um nome de sessão, preço e duração estáveis como atributos de dados. A função de atualização lê o painel visível e multiplica o valor por pessoa pelo tamanho válido do grupo. Assim, Estúdio de serigrafia, Oficina de cerâmica e Caminhada de desenho são opções realmente distintas, em vez de abas que exibem o mesmo cartão provisório.
A estimativa exibida inclui apenas os materiais. As descrições originais explicam o que esse valor cobre, e a página informa explicitamente que ele não reserva uma vaga. Não há pagamento, consulta de estoque ou agenda externa por trás dos valores. Um fluxo de reservas real exigiria esses sistemas separados e validação no servidor.
Sistema de design Preline UI: use a entrada manual exportada nesta versão do pacote
Use a entrada manual exportada nesta versão do pacote
O pacote 4.2.0 verificado disponibiliza as exportações nomeadas HSTabs e HSInputNumber em preline/non-auto. O exemplo as importa e chama seus métodos autoInit depois que a marcação existe. Apesar do nome, aqui autoInit é uma busca explícita iniciada pela aplicação, não um gancho implícito de carregamento da página para o pacote inteiro.
Durante a verificação, os caminhos .mjs individuais dos plugins não disponibilizaram uma classe padrão, e importações diretas desses caminhos podiam ser removidas devido aos metadados de efeitos colaterais do pacote. Usar a entrada manual exportada resolveu esse problema concreto de compilação. Por isso, a configuração mostra a importação funcional e versionada, em vez de uma importação genérica do plugin que não foi testada.
Sistema de design Preline UI: faça a confirmação expirar quando o plano mudar
Faça a confirmação expirar quando o plano mudar
Salvar plano local grava uma frase de status com a sessão exata, a quantidade e o total dos materiais e, em seguida, desativa o botão. Qualquer alteração na quantidade ou na aba selecionada chama update, restaura a mensagem explicativa padrão e recalcula se é possível salvar. Uma frase de confirmação anterior não pode permanecer associada a um novo plano.
O teste local selecionou Oficina de cerâmica, aumentou a quantidade para três e verificou o status resultante de US$ 54. Também inspecionou a página renderizada em 280 px. Um total estático ou um botão que apenas muda o próprio rótulo não comprovaria que os dois plugins nativos e o estado da aplicação estão conectados.
Use uma região de status para exibir o resultado local com precisão.
Impeça que valores inválidos sejam incluídos no total calculado.
Mantenha IDs estáveis para as abas e os painéis ao adaptar a marcação.
Sistema de design Preline UI: compile o tema, as variantes e a marcação-fonte real
Compile o tema, as variantes e a marcação real do código-fonte
A folha de estilos importa primeiro o Tailwind, depois as variantes do Preline e o tema padrão incluído no pacote. Os caminhos de origem explícitos incluem os arquivos locais HTML, da aplicação JavaScript e da distribuição do Preline, para que as classes utilitárias dependentes de estado estejam disponíveis no CSS gerado. A folha de estilos original do layout vem depois dessas importações.
A prévia independente incorpora o CSS compilado e o JavaScript empacotado e não faz nenhuma solicitação a CDN. Um projeto de produção pode servir os mesmos arquivos de saída separadamente. Mantenha os caminhos relativos à entrada real de CSS; o exemplo reproduzível abaixo coloca todos os arquivos-fonte na raiz do projeto para evitar dependências ocultas de um espaço de trabalho temporário.
A arte é original CSS e está oculta para tecnologias assistivas.
Esta folha de estilos vem depois das importações do Tailwind e do Preline.
04
Sistema de design Preline UI: configuração do agente de IA
Ponto de partida para implementação
Preline 4.2.0 nativo, verificado. A marcação, a lógica e o CSS completos estão incluídos acima. Os caminhos de origem de input.css pressupõem que os quatro arquivos-fonte estejam na raiz do projeto.
bash
# Create an empty directory and run:
npm init -y
npm install [email protected][email protected] @tailwindcss/[email protected] esbuild
# Save the complete examples above as body.html, app.js and style.css.
# Create input.css with exactly:
# @import "tailwindcss" source(none);
# @import "./node_modules/preline/variants.css";
# @import "./node_modules/preline/css/themes/theme.css";
# @source "./body.html";
# @source "./app.js";
# @source "./node_modules/preline/dist/*.js";
# @import "./style.css";
npx @tailwindcss/cli -i input.css -o bundle.css --minify
npx esbuild app.js --bundle --format=iife --outfile=bundle.js
# Assemble the actual root document without placeholder markup:
node -e 'const f=require("fs");f.writeFileSync("index.html",`<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Studio planner</title><link rel="stylesheet" href="bundle.css"></head><body>${f.readFileSync("body.html","utf8")}<script src="bundle.js"></script></body></html>`)'
# Serve this directory with your existing static server.
Um prompt para seu projeto
Prompt para agente de IA
Use o Preline 4.2.0 com as importações nomeadas HSTabs e HSInputNumber de preline/non-auto e inicialize explicitamente os dois plugins. Mantenha as três oficinas do Studio Saturday, o intervalo de quantidade de um a seis e o custo dos materiais da oficina selecionada. Calcule o total com base no painel ativo e na quantidade, invalide o plano salvo após qualquer alteração e valide o intervalo numérico antes de salvar localmente. Inclua a configuração de tema e variantes do Tailwind fornecida e o layout original. Não transforme o plano local do estúdio em uma confirmação de reserva ou pagamento.
05
Sistema de design Preline UI: fontes e escopo
Preline npm 4.2.0 nativo com Tailwind CSS 4.3.3. Descrições originais das sessões, ilustrações e valores fictícios para materiais. Salvar armazena apenas o estado local da página; não há reserva, pagamento ou mensagem externa.
