Uma composição nativa de acordeão e gaveta do Flowbite 4, com aliases de tema semântico verificados, uma lista de conferência de bagagem persistente e um fluxo acessível de anotações locais sobre materiais.
Acordeão e classes de painel lateral do Flowbite 4.0.2, tema padrão e Tailwind CSS 4.3.3. · Referência de implementação
02
Referência de design do sistema de design Flowbite
Tema padrão do Flowbite 4.0.2 com Tailwind CSS 4.3.3. Os aliases nomeados abaixo são variáveis reais do tema Flowbite; as escalas de cores referenciadas vêm do Tailwind. A ilustração dos materiais e as opções de espaçamento da aplicação são originais.
Flowbite Four adiciona um tema padrão com nome ao sistema de design
Flowbite Four adiciona um tema padrão com nome
Este exemplo usa o Flowbite 4.0.2, não uma coleção sem versão de trechos antigos em azul e cinza. O tema padrão define aliases semânticos, como color-body, color-heading, color-brand e color-neutral-primary. A página importa esse tema antes de aplicar o plugin Tailwind do Flowbite e, em seguida, usa classes correspondentes, como text-heading e bg-brand.
Os aliases apontam para as escalas de cores do Tailwind. Por exemplo, a ação padrão da marca referencia blue-700, enquanto o estado de passagem do cursor, mais intenso, referencia blue-800. A especificação mantém essas referências para que seja possível distinguir o papel semântico do valor de cor primitivo. A ilustração dos materiais reutiliza os mesmos papéis da marca, mas não é uma ilustração oficial do Flowbite.
Sistema de design Flowbite: a geometria do tema e o layout do Tailwind trabalham em conjunto
A geometria do tema e o layout do Tailwind trabalham em conjunto
O tema padrão define radius-base como doze pixels, valor usado por rounded-base nos contêineres principais, nos controles do painel lateral e no aviso de resultado. Ele também define raios distintos de dois, quatro, seis, oito e dezesseis pixels. Por isso, importar o tema é importante quando um componente copiado usa os nomes de classe semânticos mais recentes.
Inter aparece primeiro na pilha de fontes fornecida, mas esta prévia autocontida não baixa fontes remotas. Ela usa a alternativa de sistema disponível. O espaçamento da página segue os utilitários do Tailwind: p-6 equivale a um rem e meio, gap-8 a dois rem e p-10 para desktop a dois rem e meio. Esses utilitários de layout não são apresentados como uma escala de espaçamento Flowbite inventada à parte.
Sistema de design Flowbite: uma instância de acordeão controla três categorias
Uma instância de acordeão controla três categorias
O JavaScript cria um Accordion com uma lista de itens. Cada item tem um ID estável, um elemento acionador e um painel de destino; a categoria Paper começa aberta. alwaysOpen é false, então abrir Tools fecha Paper. As classes activeClasses e inactiveClasses personalizadas usam os nomes semânticos de texto e superfície do tema padrão.
A classe controla a visibilidade do painel e atualiza aria-expanded no acionador. A marcação fornece aria-controls e IDs correspondentes para os painéis. As caixas de seleção da lista permanecem no documento quando um painel é recolhido, portanto, o estado marcado persiste ao alternar entre categorias. Recolher uma seção altera sua visibilidade, mas não apaga o trabalho de organização do usuário.
Sistema de design Flowbite: o progresso é calculado com base nas caixas de seleção marcadas
O progresso é calculado com base nas caixas de seleção marcadas
Seis caixas de seleção reais representam materiais específicos para a oficina. A aplicação calcula a quantidade de itens organizados, o próximo item e o texto sobre os itens restantes com base no estado atual das caixas. A largura da barra de progresso e aria-valuenow são atualizadas com base nessa mesma contagem; nenhum contador separado pode divergir da lista.
As folhas de desenho e o papel vegetal são opções separadas porque sua preparação é diferente. O tapete de corte representa uma estação compartilhada, e a fita de baixa aderência vem acompanhada de um alerta sobre superfícies de parede. Esses detalhes concretos tornam a categoria expandida útil; o acordeão não serve apenas para ocultar parágrafos genéricos repetidos.
Abra Paper e marque Folhas de desenho como organizadas.
Abra Tools, marque Lápis e marcadores como organizados e volte para Paper.
Confira se as duas opções continuam marcadas e se o resumo indica duas de seis.
Sistema de design Flowbite: uma instância de painel lateral controla a visibilidade e o fundo sobreposto
Uma instância de painel lateral controla a visibilidade e o fundo sobreposto
O painel de materiais é inicializado com new Drawer, usando placement right, backdrop true e bodyScrolling false. Para abrir o painel, chama-se show; para fechá-lo, hide. A implementação nativa de Flowbite aplica as classes de posicionamento e transição, o backdrop e os atributos de visibilidade. Esta página usa deliberadamente o JavaScript API, em vez de combiná-lo com outro inicializador baseado em atributos de dados para o mesmo painel.
A largura do drawer é de vinte e quatro rem, com max-w-full, para que continue utilizável em uma janela estreita. O conteúdo pode rolar verticalmente dentro do painel. A altura da página é determinada pelo conteúdo; o h-screen do drawer é uma sobreposição fixa intencional e não cria um ciclo de altura mínima para a página incorporada.
Sistema de design Flowbite: adicione gerenciamento de foco ao ciclo de vida do drawer
Adicione o gerenciamento de foco ao ciclo de vida do painel lateral
O callback onShow torna o elemento main do plano de fundo inerte e move o foco para o campo Prepared by. onHide remove o atributo inert e devolve o foco à observação Prepare materials. Um pequeno manipulador de keydown mantém o foco em ciclo entre o primeiro e o último controle do painel ao pressionar Tab ou Shift+Tab. Esses acréscimos estão visíveis no código-fonte completo; não se presume que sejam fornecidos por uma classe de estilo.
Flowbite trata a tecla Escape no drawer. Os callbacks do exemplo garantem que, qualquer que seja a forma de fechar o painel, o plano de fundo volte a ser interativo. O painel é identificado por aria-labelledby; o controle de fechamento tem um nome acessível explícito. Em uma aplicação real, esse comportamento deve ser testado junto com os próprios portais e o roteamento, sem presumir que o nome de uma biblioteca garanta acessibilidade em todos os casos.
Sistema de design Flowbite: valide o responsável e salve apenas o texto local
Valide o responsável e salve apenas o texto local
O campo Prepared by é obrigatório e tem limites mínimo e máximo de caracteres. Além disso, o manipulador de envio remove os espaços em branco no início e no fim do nome e rejeita entradas que contenham apenas espaços. Session note é opcional e aceita até 240 caracteres. O resumo dos itens restantes é atualizado quando o drawer é aberto, para refletir a lista de verificação atual, e não uma etapa anterior da preparação.
Ao salvar, o drawer é fechado e uma nota local é anunciada com o responsável, a quantidade de itens separados e o texto opcional. Nenhum e-mail é enviado e nenhum documento compartilhado é criado. As strings fornecidas pelo usuário são atribuídas com textContent. Ao editar a lista de verificação, o aviso de resultado anterior é removido, pois a contagem que ele exibe deixaria de ser confiável.
Sistema de design Flowbite: inclua as classes geradas pela biblioteca JavaScript
Inclua as classes geradas pela biblioteca JavaScript
A entrada do Tailwind importa o tema padrão de Flowbite e registra flowbite/plugin. Diretivas source explícitas incluem HTML, o módulo da aplicação e a biblioteca ESM de Flowbite. Esta última origem é importante: as classes adicionadas pela biblioteca em tempo de execução precisam estar presentes na folha de estilos gerada, mesmo que não tenham sido escritas diretamente no HTML inicial.
O pacote importa Accordion e Drawer de flowbite. O exemplo inicializa cada instância uma única vez, depois que a marcação está disponível. Aplicações com frameworks que montam e desmontam telas devem combinar a configuração do ciclo de vida com a limpeza das instâncias para evitar ouvintes duplicados. Esta página local tem uma única montagem e não faz transições no lado do cliente entre rotas.
Sistema de design Flowbite: um guia de preparação com limites de implementação claros
Um guia de organização com limites de implementação visíveis
O guia de campo demonstra um acordeão com bastante conteúdo, estado persistente das caixas de seleção e um fluxo com sobreposição. Ele não inventa dados de estoque nem resultados de compras remotas. Os seis materiais são tarefas de exemplo para preparar uma oficina, e a nota salva permanece na memória enquanto a página estiver aberta.
O tema semântico padrão, as classes dos componentes e o comportamento de JavaScript vêm de Flowbite; o conteúdo da oficina, a ilustração original e o aprimoramento do gerenciamento de foco são código da aplicação. Essa separação permite copiar uma composição útil e entender quais responsabilidades a biblioteca realmente cobre.
Use a instância com estado de Flowbite para controlar a visibilidade do painel.
Mantenha os dados da lista de verificação e o progresso calculado na lógica da aplicação.
Trate compras reais ou persistência compartilhada somente por meio de uma integração explícita com um backend.
Os botões são vinculados aos IDs dos painéis por meio de aria-controls.
O título identifica o drawer.
A barra de progresso expõe a mesma contagem exibida para pessoas com visão.
Instâncias nativas de Flowbite e estado local
Inicialização de Accordion e Drawer, além da lista de verificação específica da aplicação e do gerenciamento de foco.
javascript
import {Accordion,Drawer} from 'flowbite';
const q=s=>document.querySelector(s),drawerEl=q('#materials-drawer'),page=q('#page');
const accordion=new Accordion(q('#packing-accordion'),['paper','tools','space'].map((id,i)=>({id,triggerEl:q(`#${id}-trigger`),targetEl:q(`#${id}-panel`),active:i===0})),{alwaysOpen:false,activeClasses:'bg-brand-softer text-fg-brand',inactiveClasses:'bg-neutral-primary text-heading'});
const drawer=new Drawer(drawerEl,{placement:'right',backdrop:true,bodyScrolling:false,onShow(){page.inert=true;q('#owner').focus();},onHide(){page.inert=false;q('#open-note').focus();}});
const boxes=[...document.querySelectorAll('[data-item]')];
function refresh(){let packed=boxes.filter(x=>x.checked),left=boxes.filter(x=>!x.checked);q('#count').value=`${packed.length} of 6`;q('#bar').style.width=`${packed.length/6*100}%`;q('[role="progressbar"]').setAttribute('aria-valuenow',packed.length);q('#next-item').textContent=left.length?`Next: ${left[0].dataset.item}`:'Everything on the list is packed.';q('#remaining').textContent=left.length?`Still needed: ${left.map(x=>x.dataset.item).join(', ')}.`:'All six materials are packed.';q('#result').hidden=true;}
boxes.forEach(x=>x.addEventListener('change',refresh));q('#clear').onclick=()=>{boxes.forEach(x=>x.checked=false);refresh();};q('#open-note').onclick=()=>{refresh();drawer.show();};q('#close-note').onclick=()=>drawer.hide();drawerEl.addEventListener('keydown',e=>{if(e.key==='Tab'){let els=[...drawerEl.querySelectorAll('button,input,textarea')],first=els[0],last=els.at(-1);if(e.shiftKey&&document.activeElement===first){e.preventDefault();last.focus();}else if(!e.shiftKey&&document.activeElement===last){e.preventDefault();first.focus();}}});q('#note-form').onsubmit=e=>{e.preventDefault();const owner=q('#owner');if(owner.value.trim().length<2){owner.setCustomValidity('Enter at least two non-space characters.');owner.reportValidity();return;}drawer.hide();q('#result').hidden=false;q('#result').textContent=`Local note prepared by ${owner.value.trim()}: ${boxes.filter(x=>x.checked).length} of 6 items packed. ${q('#note').value.trim()||'No extra note.'}`;};q('#owner').oninput=()=>q('#owner').setCustomValidity('');refresh();
Salve a interação fornecida como main.js e compile-a em bundle.js, conforme mostrado na configuração.
A área de visualização e o carregamento nativo de recursos estão incluídos.
04
Configuração do agente do sistema de design Flowbite
Ponto de partida para implementação
Verificado com Flowbite 4.0.2 e Tailwind CSS 4.3.3. Ajuste o caminho de origem em node_modules à localização real de input.css. Não são necessárias fontes remotas.
css
/* npm install [email protected] */
/* npm install -D [email protected] @tailwindcss/[email protected] esbuild */
/* input.css, next to body.html and main.js: */
@import "tailwindcss" source(none);
@import "flowbite/src/themes/default";
@plugin "flowbite/plugin";
@source "./body.html";
@source "./main.js";
@source "./node_modules/flowbite/lib/esm";
/* npx @tailwindcss/cli -i input.css -o output.css --minify */
/* npx esbuild main.js --bundle --format=iife --outfile=bundle.js */
/* index.html: link output.css then style.css; include the supplied markup. */
/* Load bundle.js with defer, or after the markup. */
Um prompt para seu projeto
Prompt para agente de IA
Use o guia completo de preparação para oficinas de Flowbite 4.0.2, incluindo a descoberta de origens do Tailwind e a inicialização nativa de Accordion e Drawer. Mantenha os materiais agrupados e o estado da lista de verificação associados ao guia, e valide os dados do responsável antes de registrar uma nota local de preparação. Preserve o gerenciamento de foco por teclado, o tratamento do plano de fundo como inerte e o comportamento de fechamento do drawer. Mantenha a ilustração original CSS separada do tema semântico da biblioteca. Não introduza solicitações de serviço nem envios externos neste fluxo local de preparação.
05
Fontes e escopo do sistema de design Flowbite
Flowbite 4.0.2 com o tema padrão. O conteúdo sobre a preparação, a arte decorativa e o aprimoramento do gerenciamento de foco são originais. As notas sobre os materiais permanecem locais.
