# Sistema de design Flowbite ## Prévia da interface do sistema de design Flowbite Expanda três categorias de itens, marque os materiais e prepare uma anotação local no painel lateral nativo. ## 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. ### Papéis semânticos padrão para texto e status | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --color-body | var(--color-gray-600) | Texto explicativo comum. | | --color-body-subtle | var(--color-gray-500) | Descrições complementares. | | --color-heading | var(--color-gray-900) | Títulos e rótulos de destaque. | | --color-fg-brand | var(--color-blue-700) | Texto em cor da marca. | | --color-fg-success | var(--color-emerald-700) | Texto de sucesso. | | --color-fg-danger | var(--color-rose-700) | Texto de erro. | | --color-fg-warning | var(--color-orange-900) | Texto de alerta. | | --color-fg-disabled | var(--color-gray-400) | Texto desativado. | ### Superfícies e bordas padrão | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --color-neutral-primary | var(--color-white) | Superfície do cartão e do painel lateral. | | --color-neutral-secondary | var(--color-gray-50) | Plano de fundo da página. | | --color-neutral-tertiary | var(--color-gray-100) | Trilho de progresso. | | --color-brand | var(--color-blue-700) | Ação primária e progresso dos itens organizados. | | --color-brand-soft | var(--color-blue-100) | Indicador de foco ou superfície suave da marca. | | --color-brand-softer | var(--color-blue-50) | Superfície do acordeão aberto e da ilustração. | | --color-brand-strong | var(--color-blue-800) | Passagem do cursor sobre uma ação. | | --color-default | var(--color-gray-200) | Borda padrão do componente. | | --color-success-soft | var(--color-emerald-50) | Superfície do resultado local. | ### Variáveis padrão de geometria e fontes | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --font-sans | 'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' | Pilha de interface com Inter como primeira opção; a prévia usa a alternativa de sistema disponível, sem fontes remotas. | | --font-mono | 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace' | Pilha de fontes para código. | | --radius-xxs | 2px | Raio de dois pixels. | | --radius-xs | 4px | Raio de quatro pixels. | | --radius-sm | 6px | Raio de seis pixels. | | --radius | 8px | Raio de oito pixels. | | --radius-base | 12px | Raio de doze pixels do painel, usado por rounded-base. | | --radius-lg | 16px | Raio de dezesseis pixels. | | --default-border-width | 1px | Bordas de um pixel. | | --leading-5 | 20px | Entrelinha de vinte pixels. | | --leading-6 | 24px | Entrelinha de vinte e quatro pixels. | ### Valores de layout do Tailwind usados no exemplo | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | p-6 / md:p-10 | 1.5rem / 2.5rem | Preenchimento da página, baseado na unidade de espaçamento padrão de um quarto de rem do Tailwind. | | gap-8 | 2rem | Espaço entre as categorias de materiais e o resumo do progresso. | | md breakpoint | 48rem | Mude para duas colunas. | | text-sm / text-xl / text-3xl | 0.875rem / 1.25rem / 1.875rem | Utilitários para o corpo do texto, o título da seção e o título da página. | | w-96 / max-w-full | 24rem / 100% | A largura do painel lateral não ultrapassa a área visível em dispositivos móveis. | ## Guia completo do sistema de design Flowbite 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. ## 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. Consulte a especificação de apoio ## 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. Consulte a especificação de apoio ## 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. Consulte a especificação de apoio ## 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. 1. Abra Paper e marque Folhas de desenho como organizadas. 2. Abra Tools, marque Lápis e marcadores como organizados e volte para Paper. 3. Confira se as duas opções continuam marcadas e se o resumo indica duas de seis. Consulte a especificação de apoio ## 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. Consulte a especificação de apoio ## 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. Consulte a especificação de apoio ## 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. Consulte a especificação de apoio ## 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. Consulte a especificação de apoio ## 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. Consulte a especificação de apoio ## Exemplos de componentes do sistema de design Flowbite ### Marcação do guia de preparação e do drawer Classes de tema semântico, controles de caixa de seleção reais e painéis de acordeão vinculados. ```

FLOWBITE · FIELD GUIDE

Pack for a day of making.

A workshop packing guide with grouped instructions and a local materials note.

Choose stocks before the session. Keep one sheet untouched as a reference.

``` Referência de código - 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. ``` 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(); ``` Referência de código - Uma instância de Accordion controla as três categorias. - Os callbacks do ciclo de vida do drawer tornam o plano de fundo inerte e restauram o foco. - O ciclo de foco é um acréscimo explícito da aplicação. ### Ilustração original de preparação e CSS de apoio Detalhes de layout da aplicação ao redor dos utilitários nativos. ``` body{margin:0;background:var(--color-neutral-secondary);font-family:var(--font-sans)}.category-trigger{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px;width:100%;text-align:left;font-size:15px;font-weight:600;border-bottom:1px solid var(--color-default)}.category-trigger b{font-size:11px;opacity:.6;margin-right:12px}.category-trigger:focus-visible{outline:3px solid var(--color-brand);outline-offset:-3px}.category-body{padding:20px;background:var(--color-neutral-primary);font-size:14px;line-height:1.7;border-bottom:1px solid var(--color-default)}.category-body p{margin-bottom:20px}.category-body label{display:flex;align-items:flex-start;gap:12px;margin:16px 0;cursor:pointer}.category-body small{display:block;font-size:12px;color:var(--color-body-subtle);margin-top:4px}.check{width:18px;height:18px;border:1px solid var(--color-default);border-radius:4px;margin-top:3px;color:var(--color-brand)}.kit-art{height:160px;background:var(--color-brand-softer);border-radius:var(--radius-base);position:relative;overflow:hidden}.kit-art i{position:absolute;width:110px;height:95px;background:#fff;border:1px solid var(--color-brand-medium);top:35px;left:20%;transform:rotate(-12deg)}.kit-art i:nth-child(2){left:35%;transform:rotate(10deg);background:var(--color-brand-soft)}.kit-art i:nth-child(3){width:8px;height:120px;left:70%;top:20px;transform:rotate(25deg);background:var(--color-brand)}.kit-art em{position:absolute;width:95px;height:22px;background:var(--color-brand-medium);bottom:20px;left:20%;transform:rotate(-20deg)}[hidden]{display:none!important}button{cursor:pointer}button:focus-visible{outline:3px solid var(--color-brand);outline-offset:3px}@media(max-width:600px){.category-trigger,.category-body{padding:16px}} ``` Referência de código - A geometria do papel, do lápis e da régua é uma CSS decorativa original. ### Documento index.html completo Use com a compilação da folha de estilos e o código completo de interação fornecidos acima. ``` Flowbite specimen

FLOWBITE · FIELD GUIDE

Pack for a day of making.

A workshop packing guide with grouped instructions and a local materials note.

Choose stocks before the session. Keep one sheet untouched as a reference.

``` Referência de código - 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. ## 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. ``` /* npm install flowbite@4.0.2 */ /* npm install -D tailwindcss@4.3.3 @tailwindcss/cli@4.3.3 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 ``` 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. ``` ## 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. - Repositório oficial Configuração e exemplos de componentes da versão quatro de API. - Código-fonte do tema padrão Aliases semânticos e geometria reais. - Implementação de Accordion Opções da instância e atualizações de aria-expanded. - Implementação de Drawer Visibilidade, backdrop e métodos do ciclo de vida. - Guia de Accordion Referência oficial de composição. - Guia de Drawer Referência oficial de sobreposição de API. - Tema do Tailwind Utilitários básicos de espaçamento e tipografia. ## Recursos relacionados ao sistema de design Flowbite ### Fomantic UI Uma estante de leitura nativa do Fomantic UI com valores de tema compilados e verificados, módulos jQuery de menu suspenso e avaliação, suporte explícito a teclado e uma lista local persistente de itens selecionados. ### Foundation Uma bancada funcional de comprovação do Foundation que usa XY Grid, validadores personalizados do Abide, confirmação com Reveal, configurações Sass reais e código completo de integração local. ### Framework7 Um caderno de esboços nativo do Framework7 com ações reais de deslizar para fora, valores explícitos de tema do iOS, um acionador de ações acessível por teclado e uma lista filtrada que mantém os estudos concluídos até a redefinição. - [Referência de implementação](https://flowbite.com/docs/components/accordion/) - [Fonte](https://github.com/themesberg/flowbite/blob/main/src/themes/default.css) - [Fonte](https://tailwindcss.com/docs/theme) - [Consulte a especificação de apoio](https://flowbite.com/docs/getting-started/quickstart/) - [Consulte a especificação de apoio](https://flowbite.com/docs/components/accordion/) - [Consulte a especificação de apoio](https://flowbite.com/docs/forms/checkbox/) - [Consulte a especificação de apoio](https://flowbite.com/docs/components/drawer/) - [Consulte a especificação de apoio](https://flowbite.com/docs/forms/input-field/) - [Consulte a especificação de apoio](https://flowbite.com/docs/getting-started/javascript/) - [Referência de código](https://flowbite.com/docs/components/accordion/) - [Referência de código](https://flowbite.com/docs/components/drawer/) - [Referência de código](https://flowbite.com/docs/customize/colors/) - [Referência de código](https://flowbite.com/) - [Repositório oficial Configuração e exemplos de componentes da versão quatro de API.](https://github.com/themesberg/flowbite) - [Código-fonte do tema padrão Aliases semânticos e geometria reais.](https://github.com/themesberg/flowbite/blob/main/src/themes/default.css) - [Implementação de Accordion Opções da instância e atualizações de aria-expanded.](https://github.com/themesberg/flowbite/blob/main/src/components/accordion/index.ts) - [Implementação de Drawer Visibilidade, backdrop e métodos do ciclo de vida.](https://github.com/themesberg/flowbite/blob/main/src/components/drawer/index.ts) - [Guia de Accordion Referência oficial de composição.](https://flowbite.com/docs/components/accordion/) - [Guia de Drawer Referência oficial de sobreposição de API.](https://flowbite.com/docs/components/drawer/) - [Tema do Tailwind Utilitários básicos de espaçamento e tipografia.](https://tailwindcss.com/docs/theme)