Sistema de componentes empresariais · Novo recurso
Sistema de design Tabler.
Um diário de projeto nativo do Tabler com variáveis reais do tema 1.6, cartões de linha do tempo, contexto de datagrid, validação em janela modal e uma composição clara/escura que aceita marcos locais.
Tabler 1.6.1 compilado CSS e seu modal integrado JavaScript. Conteúdo original do projeto e estudos de capa. · Referência de implementação
02
Referência de design do sistema de design Tabler
Variáveis compiladas do CSS 1.6.1 Tabler. Esta versão usa primitivas OKLCH e light-dark()/color-mix() em funções semânticas; exemplos mais antigos de Tabler baseados em valores hexadecimais não devem ser considerados o mesmo tema. Os valores abaixo são os padrões reais da versão instalada.
Sistema de design Tabler: use o tema correspondente à versão Tabler
Use o tema correspondente à versão Tabler
O diário do projeto foi criado com Tabler 1.6.1. Sua paleta compilada usa cores OKLCH, enquanto as variáveis semânticas usam light-dark e color-mix. Por isso, a referência apresenta essas expressões reais, em vez de copiar valores hexadecimais de um guia antigo de Bootstrap ou Tabler. A ação principal, os selos de status e as funções de superfície vêm todos desta versão instalada.
Tabler amplia o vocabulário de componentes de Bootstrap com seus próprios padrões de layout e exibição de informações. O exemplo usa as classes nativas de timeline, page-header, datagrid e avatar, além de cartões, formulários e um modal conhecidos. Esses detalhes fazem dele uma composição de Tabler, e não uma grade genérica de cartões com outro logotipo.
Sistema de design Tabler: o modo de cores altera as superfícies e o texto
O modo de cores altera as superfícies e o texto
O controle de tema altera data-bs-theme no elemento html e atualiza seu próprio estado pressionado e o rótulo da ação. As expressões semânticas de Tabler passam então a selecionar valores claros ou escuros. Para este exemplo simples com dois estados, não é necessário um gerenciador de temas JavaScript separado, e nenhuma preferência é mantida fora da página.
Decisão, Protótipo e Revisão usam classes nativas de tonalidade azul, roxa e verde. Seus rótulos de texto continuam fazendo sentido sem depender apenas das cores. A arte dos estudos de capa mantém sua paleta original, semelhante à do papel, nos dois modos; os cartões ao redor, a página e o texto usam o tema real do componente.
Sistema de design Tabler: texto compacto no corpo com hierarquia de página independente
Texto compacto no corpo com hierarquia de página independente
O corpo padrão usa 0.875rem, com altura de linha próxima a 1.4286, resultando em texto de cerca de 14 px quando a raiz tem 16 px. A pilha de fontes instalada usa as fontes sans-serif do sistema, portanto esta pré-visualização não precisa de fontes remotas. Os títulos dos cartões e os metadados mantêm suas classes nativas, enquanto o título da página recebe um tamanho original de 32 px.
Os valores nativos de espaçamento seguem a progressão 0, 0.25, 0.5, 1, 1.5, 2 e 2.5rem. São variáveis nomeadas no CSS instalado, não uma escala estimada. O preenchimento padrão do corpo do cartão é de 1.25rem em ambas as direções. O nó da linha do tempo tem 2.5rem, e seu conector usa a variável de preenchimento da página para cobrir o espaço entre as entradas.
Sistema de design Tabler: uma linha do tempo é mais do que uma borda vertical
Uma linha do tempo é mais do que uma borda vertical
Cada marco é um item de lista timeline-event, com timeline-event-icon e timeline-event-card. O CSS nativo posiciona o nó, desenha o conector entre as entradas que não são finais e desloca o cartão de conteúdo pela largura do nó mais o preenchimento da página. O exemplo não simula a linha com uma imagem de fundo nem depende de posições absolutas para cada cartão.
Os cartões têm conteúdos variados. Um registra uma decisão estrutural, outro contém três estudos de capa reais e o terceiro registra uma revisão de referência. O contexto do projeto fica fora da sequência porque o formato e o foco atual são atributos permanentes, não eventos datados. Em telas menores, a barra lateral aparece depois da linha do tempo na ordem do documento.
Sistema de design Tabler: use Datagrid para pequenos grupos de rótulos e valores
Use Datagrid para pequenos grupos de rótulos e valores
O cartão de contexto do projeto usa pares de datagrid-item, datagrid-title e datagrid-content. Formato, Equipe, Marcos e Foco atual são atributos paralelos, por isso são apresentados em um datagrid nativo compacto, em vez de uma tabela com cabeçalhos de linha redundantes. Os avatares usam iniciais em texto e não precisam de imagens remotas.
A contagem de etapas é o único valor de contexto alterado por este exemplo. Adicionar uma entrada local atualiza a contagem de três para quatro, sem modificar a descrição original do projeto. Assim, evitamos inventar métricas de painel: o número corresponde diretamente às entradas visíveis na lista.
Sistema de design Tabler: o modal incluído controla a visibilidade e o foco
O modal integrado controla a visibilidade e o foco
O botão Adicionar etapa abre o modal nativo por meio de data-bs-toggle e data-bs-target. O Tabler JavaScript incluído fornece a implementação do modal. Um listener de shown.bs.modal foca o campo de título após a transição, quando a entrada está visível. Os botões Fechar e Cancelar usam data-bs-dismiss para seguir o mesmo ciclo de vida do componente.
O modal contém um formulário real. Os atributos de obrigatoriedade e comprimento rejeitam campos incompletos antes da execução do manipulador de envio. O manipulador também verifica o comprimento após remover os espaços das extremidades, pois uma sequência de espaços não é um título nem uma justificativa útil. A validação preserva o texto inserido para que possa ser corrigido; o formulário só é limpo depois que uma entrada é adicionada com sucesso.
Abra o modal e envie os campos vazios para conferir o primeiro controle inválido.
Informe um título, escolha o tipo de etapa e explique a justificativa.
Envie e confirme que a nova entrada e a contagem de contexto são atualizadas juntas.
Sistema de design Tabler: insira texto com segurança e identifique a origem local
Insira texto seguro e identifique os limites locais
A aplicação cria uma estrutura de cartão conhecida e insere o título e a justificativa com textContent. Apenas um mapeamento fixo dos três tipos do seletor define a classe de cor. O texto fornecido pelo usuário nunca é interpolado no cartão HTML. O novo item é inserido no início da lista com o rótulo LOCAL ENTRY, claramente identificado, em vez de um horário de servidor inventado.
Após a inserção, a instância existente do modal é ocultada e uma notificação de status identifica a nova etapa. Ela informa explicitamente que nenhum serviço do projeto foi atualizado. Um diário colaborativo real precisaria de persistência, identidade do autor e garantias de ordenação; adicionar algo ao DOM local não oferece esses recursos.
Sistema de design Tabler: mantenha o conteúdo denso legível em uma linha do tempo estreita
Mantenha o conteúdo denso legível em uma linha do tempo estreita
A grade principal usa col-lg-8 e col-lg-4. Abaixo do breakpoint nativo large, o contexto do projeto aparece abaixo do diário. A folha de estilos original para telas pequenas reduz o espaço lateral da linha do tempo, permite que grupos de títulos e badges quebrem linha e redimensiona os estudos de capa, mantendo o mesmo texto e as mesmas ações.
Uma linha do tempo pode ficar apertada quando a coluna de ícones, o preenchimento dos cartões e um título longo disputam o mesmo espaço. O exemplo para dispositivos móveis mantém o nó como guia estável, mas usa um recuo compacto. Os estudos de capa originais continuam em três comparações pequenas, pois a relação entre eles é importante; as legendas complementam o parágrafo explicativo ao lado.
Mantenha o título e o tipo de etapa legíveis quando quebrarem linha.
Preserve o texto da justificativa, em vez de truncar todas as entradas da linha do tempo.
No celular, posicione o cartão de contexto após a sequência principal de leitura.
Sistema de design Tabler: carregue um par correspondente de CSS e JavaScript
Carregue um par CSS e JavaScript compatível
A configuração usa @tabler/core 1.6.1 e copia os recursos de dist para um diretório público local. Carregue tabler.min.css antes da folha de estilos da aplicação e tabler.min.js antes do código de interação local. Adicionar outro pacote Bootstrap não relacionado pode inicializar os mesmos atributos de dados duas vezes; este exemplo usa apenas o pacote Tabler correspondente.
A folha de estilos atual usa funções de cor modernas. Consulte as orientações de compatibilidade com navegadores de Tabler antes de adotá-la em um produto que precise oferecer suporte a navegadores mais antigos. O exemplo local foi testado no Chromium quanto à validação do modal nativo, à inserção na linha do tempo, ao modo escuro e ao layout de 390px; ele não é uma implantação de produção nem representa uma garantia para todos os navegadores possíveis.
A arte das capas representa três estudos de design fictícios.
O documento usa a altura do conteúdo para incorporação.
04
Configuração do agente do sistema de design Tabler
Ponto de partida para implementação
Tabler 1.6.1 verificado. Salve os módulos de layout e aplicação correspondentes como style.css e app.js. Usa os atributos de dados do modal nativo API. O wrapper HTML inclui toda a marcação do body; salve os exemplos fornecidos de interação e CSS com os nomes de arquivo indicados aqui.
html
<!-- npm install @tabler/[email protected] -->
<!-- Copy node_modules/@tabler/core/dist to public/vendor/tabler. -->
<html lang="en" data-bs-theme="light">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="/vendor/tabler/css/tabler.min.css">
<link rel="stylesheet" href="style.css">
<main class="project-log"><header class="page-header d-print-none"><div class="row align-items-center"><div class="col"><div class="page-pretitle">TABLER · PROJECT JOURNAL</div><h1 class="page-title">Atlas field notes</h1><p class="text-secondary mt-2 mb-0">Decisions, prototypes and review checkpoints for a small editorial project.</p></div><div class="col-auto d-flex gap-2"><button id="theme" class="btn" aria-pressed="false">Dark mode</button><button id="add" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#entry-modal">Add checkpoint</button></div></div></header><div class="row g-4 mt-1"><section class="col-lg-8" aria-label="Project checkpoints"><ul id="timeline" class="timeline"><li class="timeline-event"><div class="timeline-event-icon bg-blue-lt" aria-hidden="true">AM</div><div class="card timeline-event-card"><div class="card-body"><div class="d-flex justify-content-between gap-3"><h2 class="card-title mb-1">A clearer route through the issue</h2><span class="badge bg-blue-lt">Decision</span></div><div class="text-secondary small mb-3">Alex Morgan · 02 OCT</div><p class="mb-0">Group the field essays by landscape rather than author. Each chapter opens with a short map and a single question.</p></div></div></li><li class="timeline-event"><div class="timeline-event-icon bg-purple-lt" aria-hidden="true">JC</div><div class="card timeline-event-card"><div class="card-body"><div class="d-flex justify-content-between gap-3"><h2 class="card-title mb-1">Three cover directions</h2><span class="badge bg-purple-lt">Prototype</span></div><div class="text-secondary small mb-3">Jules Chen · 01 OCT</div><div class="cover-strip" aria-label="Three original cover studies"><div><b>ATLAS</b><i></i><small>RIDGE / 01</small></div><div><b>ATLAS</b><i></i><small>RIVER / 02</small></div><div><b>ATLAS</b><i></i><small>PLAIN / 03</small></div></div><p class="mt-3 mb-0">Compare the quiet title treatment against the stronger geographic silhouette before selecting a direction.</p></div></div></li><li class="timeline-event"><div class="timeline-event-icon bg-green-lt" aria-hidden="true">SR</div><div class="card timeline-event-card"><div class="card-body"><div class="d-flex justify-content-between gap-3"><h2 class="card-title mb-1">Reference package reviewed</h2><span class="badge bg-green-lt">Review</span></div><div class="text-secondary small mb-3">Sam Rivera · 30 SEP</div><p class="mb-0">Image captions, credit lines and print dimensions are recorded alongside each selected reference.</p></div></div></li></ul></section><aside class="col-lg-4"><div class="card"><div class="card-header"><h2 class="card-title">Project context</h2></div><div class="card-body"><div class="datagrid"><div class="datagrid-item"><div class="datagrid-title">Format</div><div class="datagrid-content">Editorial field journal</div></div><div class="datagrid-item"><div class="datagrid-title">Team</div><div class="datagrid-content"><span class="avatar avatar-xs me-1">AM</span><span class="avatar avatar-xs me-1">JC</span><span class="avatar avatar-xs">SR</span></div></div><div class="datagrid-item"><div class="datagrid-title">Checkpoints</div><div id="count" class="datagrid-content">3 recorded</div></div><div class="datagrid-item"><div class="datagrid-title">Current focus</div><div class="datagrid-content">Cover selection</div></div></div></div><div class="card-footer text-secondary">Sample project. New entries stay in this page.</div></div><div class="card mt-4"><div class="card-body"><h2 class="card-title">A useful checkpoint</h2><p class="text-secondary">Record the decision and the reason together. A future reader should understand what changed without reopening the meeting.</p><p class="mb-0 small">Choose Decision, Prototype or Review when adding a local entry.</p></div></div></aside></div><div id="notice" class="alert alert-success mt-3" role="status" hidden></div></main><div id="entry-modal" class="modal modal-blur fade" tabindex="-1" aria-labelledby="entry-title" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><form id="entry-form"><div class="modal-header"><h2 id="entry-title" class="modal-title">Add a local checkpoint</h2><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"><div class="mb-3"><label for="entry-name" class="form-label">Title</label><input id="entry-name" class="form-control" required minlength="5" maxlength="80" placeholder="What changed?"></div><div class="mb-3"><label for="entry-type" class="form-label">Kind</label><select id="entry-type" class="form-select"><option>Decision</option><option>Prototype</option><option>Review</option></select></div><div><label for="entry-detail" class="form-label">Reason or evidence</label><textarea id="entry-detail" class="form-control" required minlength="15" maxlength="360" rows="4" placeholder="Explain why this checkpoint matters."></textarea></div></div><div class="modal-footer"><button type="button" class="btn" data-bs-dismiss="modal">Cancel</button><button class="btn btn-primary" type="submit">Add to journal</button></div></form></div></div></div>
<script src="/vendor/tabler/js/tabler.min.js"></script>
<script src="app.js"></script>
<!-- The bundle exposes tabler.Modal; no second Bootstrap bundle is needed. -->
</html>
Um prompt para seu projeto
Prompt para agente de IA
Use Tabler 1.6.1 para reproduzir o diário do projeto Atlas, com sua linha do tempo, cartões de contexto, grade de dados e modal nativo. Mantenha o formulário de etapas validado separado da linha do tempo confirmada: cancelar não altera o diário, e um envio válido adiciona a etapa informada aos registros locais. Preserve os atributos data-bs, o pacote Tabler correspondente e o tratamento de tema. Mantenha decorativos os estudos de capa originais e deixe o texto das etapas legível em telas estreitas. Não sugira a existência de um inventário de infraestrutura nem de publicação externa.
05
Fontes e escopo do sistema de design Tabler
Tabler 1.6.1. As variáveis de tema e os componentes nativos são diferenciados do conteúdo original do projeto e da arte das capas. As novas etapas permanecem locais.
