# Sistema de design CoreUI ## Prévia da interface do sistema de design CoreUI Selecione notas, arquive um lote, confira a aba Arquivo e desfaça a operação mais recente. ## Referência de design do sistema de design CoreUI Valores padrão do tema claro de CoreUI para Bootstrap 5.9.0, obtidos da folha de estilos compilada instalada. Estes nomes --cui-* são variáveis reais do runtime. O aplicativo de exemplo usa componentes gratuitos; não pressupõe o uso de widgets PRO de CoreUI. ### Funções do tema claro | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --cui-primary | #5856d6 | Cor primária roxa de CoreUI. | | --cui-primary-contrast | #fff | Texto combinado com a cor primária. | | --cui-secondary | #6b7785 | Função secundária. | | --cui-success | #1b9e3e | Função de sucesso. | | --cui-info | #39f | Função informativa. | | --cui-warning | #f9b115 | Função de aviso. | | --cui-danger | #e55353 | Função de perigo. | | --cui-primary-bg-subtle | #cfc7f3 | Fundo suave do cartão de contexto na cor primária. | | --cui-primary-text-emphasis | #3634a3 | Texto sobre a superfície suave da cor primária. | | --cui-primary-border-subtle | #9d92e6 | Borda do cartão de contexto. | | --cui-danger-bg-subtle | #f9d4d4 | Superfície do selo de prioridade alta. | | --cui-danger-text-emphasis | #671414 | Texto do selo de prioridade alta. | | --cui-warning-bg-subtle | #feecc5 | Superfície do selo de prioridade média. | | --cui-warning-text-emphasis | #764705 | Texto do selo de prioridade média. | ### Padrões de tipografia e superfície | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --cui-font-sans-serif | system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" | Pilha de fontes da interface do sistema. | | --cui-body-font-size | 1rem | Tamanho padrão do corpo do texto: 1rem; a tabela compacta usa uma substituição original de 14px. | | --cui-body-line-height | 1.5 | Altura de linha padrão do corpo do texto. | | --cui-body-color | rgba(37, 42.92, 54.02, 0.95) | Cor primária do corpo do texto no tema claro. | | --cui-body-bg | #fff | Superfície primária. | | --cui-tertiary-bg | #f3f4f7 | Fundo da página neste exemplo. | | --cui-secondary-color | rgba(37, 42.92, 54.02, 0.681) | Função de texto complementar. | | --cui-border-color | #dbdfe6 | Cor padrão do separador. | ### Variáveis de cantos e foco | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --cui-border-radius | 0.375rem | Equivalente padrão a 6px com uma raiz de 16px. | | --cui-border-radius-sm | 0.25rem | Equivalente pequeno a 4px. | | --cui-border-radius-lg | 0.5rem | Equivalente grande a 8px. | | --cui-border-radius-xl | 1rem | Equivalente extragrande a 16px. | | --cui-border-radius-pill | 50rem | Formato de pílula. | | --cui-focus-ring-width | 0.25rem | Largura do indicador de foco. | | --cui-focus-ring-opacity | 0.25 | Opacidade do indicador de foco. | | --cui-focus-ring-color | rgba(88, 86, 214, 0.25) | Cor do indicador de foco baseada na cor primária. | ### Opções originais de densidade da fila | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Page padding | 32px; 24px 14px mobile | Recuo original do aplicativo. | | Table minimum width | 740px | As colunas permanecem legíveis em uma área de rolagem responsiva local. | | Table cell padding | 16px | Escolha original de densidade, próxima à estrutura nativa da tabela. | | Table text | 14px; headings 12px | Hierarquia compacta original. | | g-3 summary row | 1rem native gutter | Os cartões de métricas responsivos usam a margem padrão da grade. | | Toast behavior | autohide: false | A ação de desfazer permanece disponível até ser dispensada ou substituída por um lote posterior. | ## Guia completo do sistema de design CoreUI 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. ## Sistema de design CoreUI: escolha o runtime CoreUI que você realmente está usando ### Escolha o runtime CoreUI que você realmente está usando > Este exemplo usa CoreUI for Bootstrap 5.9.0, o pacote de CSS e JavaScript para o navegador. O CoreUI também oferece pacotes específicos para frameworks, mas as importações de seus componentes não são intercambiáveis com os atributos de dados deste exemplo. A configuração fornece uma folha de estilos e um script empacotado correspondentes, sem pressupor um provider de React ou Vue. A central de revisão usa cartões, tabelas, formulários, abas e notificações toast gratuitos. Ela não substitui discretamente esses componentes por uma grade de dados PRO ou um seletor avançado pago. Essa limitação permite reproduzir o exemplo completo a partir do pacote indicado, sem exigir a compra de um modelo não documentado. Consulte a especificação de apoio ## Sistema de design CoreUI: use a cor primária roxa real e as funções de status correspondentes ### Use a cor primária roxa real e as funções de status correspondentes A cor primária do tema claro de CoreUI é #5856d6, com contraste branco. O cartão de princípios de revisão usa juntos primary-bg-subtle, primary-border-subtle e primary-text-emphasis. Esses nomes descrevem um tratamento de superfície coordenado; assim, o texto complementar não aparece sobre um fundo colorido com uma cor de primeiro plano arbitrária. Os selos de prioridade alta e média também combinam superfícies suaves de perigo ou aviso com texto de ênfase correspondente. Os rótulos de texto indicam a classificação independentemente da cor. São prioridades de exemplo para uma revisão de design, não uma afirmação de que todo selo vermelho de um produto deva representar o mesmo estado de domínio. Consulte a especificação de apoio ## Sistema de design CoreUI: separe a tipografia padrão do corpo do texto da tabela de trabalho compacta ### Separe a tipografia padrão do corpo do texto da tabela de trabalho compacta O corpo compilado de CoreUI usa, por padrão, um rem e altura de linha de 1.5. O exemplo usa intencionalmente texto de quatorze pixels na tabela e rótulos de coluna de doze pixels para facilitar a análise de uma fila densa. Os valores do título e do resumo da página têm tamanhos originais próprios, maiores. O guia não apresenta esses ajustes da aplicação incorretamente como padrões de toda a biblioteca. Os três cartões de contexto usam a grade responsiva nativa e o espaçamento g-3. Inbox e Archived permanecem lado a lado em telas pequenas, enquanto o terceiro cartão, com explicações, ocupa uma linha inteira. Todos os números são derivados dos cinco registros de exemplo visíveis; não há métricas de painel sem relação com eles nem gráficos de crescimento inventados. Consulte a especificação de apoio ## Atributos de dados do sistema de design CoreUI controlam painéis de abas reais ### Os atributos de dados de CoreUI controlam painéis de abas reais Inbox e Archive são abas baseadas em botões, com data-coreui-toggle="tab" e destinos correspondentes aos painéis das abas. A marcação inclui as relações entre tablist, tab, tabpanel, aria-controls e aria-labelledby. O componente CoreUI JavaScript atualiza o estado ativo e a visibilidade, em vez de um manipulador da aplicação apenas alterar um sublinhado. A classe nav-underline-border define o tratamento visual deste componente. Trocar de aba não arquiva registros nem limpa uma seleção. A aba controla qual parte da fila local é exibida, enquanto os Sets de seleção e arquivamento da aplicação permanecem como estados separados. Consulte a especificação de apoio ## O selecionar tudo do sistema de design CoreUI tem um estado misto significativo ### A seleção de todos os itens tem um estado misto significativo Cada nota usa um ID estável da série R. Marcar uma linha adiciona esse ID a um Set de selecionados. A caixa de seleção do cabeçalho fica marcada somente quando todos os registros atuais de Inbox estão selecionados, indeterminada quando apenas alguns estão selecionados e desabilitada quando Inbox está vazia. Esses estados são recalculados sempre que a fila é renderizada. O botão de ação em lote fica desabilitado quando nada está selecionado, e o texto ao lado informa a quantidade atual. A seleção é limpa após uma ação de arquivamento para que um registro já arquivado não permaneça selecionado acidentalmente no próximo lote. A nota original e seu responsável continuam associados ao registro, em vez de serem substituídos por um rótulo genérico de Resolvido. 1. Selecione duas notas e confira o estado misto da caixa de seleção do cabeçalho. 2. Arquive a seleção e confirme que a contagem de Inbox diminuiu em dois. 3. Abra Archive para ler as solicitações originais e ver quem é responsável por elas. Consulte a especificação de apoio ## Um toast do sistema de design CoreUI apresenta uma única ação específica e reversível ### Uma notificação toast apresenta uma única ação específica e reversível A aplicação registra os IDs exatos do lote arquivado mais recentemente e, em seguida, chama o método show da instância nativa de Toast. autohide é false porque a notificação contém uma ação de desfazer; o exemplo não remove essa possibilidade após um temporizador arbitrariamente curto. Ainda é possível dispensar o toast manualmente. Desfazer remove do Set de arquivados somente os IDs salvos, limpa o registro do último lote e desabilita sua ação. Se um lote posterior for desfeito, um lote arquivado anteriormente continua arquivado. Esta é, deliberadamente, uma operação de um nível, não uma alegação enganosa de que há um histórico completo de ações desfeitas. Consulte a especificação de apoio ## O sistema de design CoreUI mantém a solicitação legível após o arquivamento ### Mantenha a solicitação legível após arquivá-la A tabela de Inbox mostra o título da nota, a alteração específica solicitada, a área, a prioridade e a pessoa responsável. Archive exibe uma lista compacta que preserva o título, o ID, a pessoa responsável e a solicitação completa. Após a resolução, reduz os elementos visuais da tabela sem excluir as informações necessárias para entender o que foi alterado. Em dispositivos móveis, a tabela mantém uma largura mínima de 740px dentro de table-responsive. A região identificada pode receber foco pelo teclado e apresenta um estilo de foco visível; o deslocamento horizontal permanece dentro da tabela, sem ampliar o documento. Remover colunas importantes apenas para evitar uma barra de rolagem prejudicaria esta tarefa de revisão. Consulte a especificação de apoio ## O sistema de design CoreUI apresenta um resultado persistente sem inventar um backend ### Use um resultado persistente sem inventar um back-end O toast tem uma função de status educada e um anúncio atômico. Um segundo status em linha descreve o resultado local do arquivamento ou da ação de desfazer. Nenhum deles afirma que um chamado externo foi encerrado: a página informa explicitamente que não há integração com um rastreador de chamados. A prévia altera apenas os Sets em memória; portanto, ao recarregar a página, as cinco notas originais são restauradas. Os títulos e as descrições dos registros são inseridos com textContent, inclusive na lista de arquivos. Mapeamentos de classes fixos representam as duas prioridades conhecidas. Isso mantém o texto semelhante a conteúdo fornecido por usuários separado da estrutura de HTML e permite inspecionar o fluxo de dados do exemplo. - Informe o tamanho real do lote e seu escopo local. - Mantenha o botão de desfazer disponível enquanto o registro salvo for válido. - Não apresente uma atualização local do DOM como uma resolução remota bem-sucedida. Consulte a especificação de apoio ## Carregue o pacote sistema de design CoreUI antes do módulo local ### Carregue o pacote CoreUI antes do módulo local A configuração completa copia os recursos dist do pacote para um caminho público local e carrega coreui.bundle.min.js antes de app.js. O bundle disponibiliza coreui.Toast e fornece o comportamento das abas para os atributos data-coreui. Adicionar um segundo runtime de Bootstrap é desnecessário nesta composição e pode gerar uma duplicidade confusa de responsabilidades. O tema claro é definido explicitamente por data-coreui-theme="light". Uma aplicação maior pode adotar o mecanismo de modo de cor de CoreUI, mas deve revisar em conjunto os pares de texto e superfície semânticos. A verificação local abrangeu seleção parcial, um lote de dois registros, leitura da aba Archive, restauração ao desfazer e uma janela de 390px. Consulte a especificação de apoio ## Exemplos de componentes do sistema de design CoreUI ### Fila, aba de arquivamento e toast para desfazer Atributos data-coreui de CoreUI, controles de tabela, badges semânticos de prioridade e um toast persistente. ```

COREUI · REVIEW OPERATIONS

Keep the review queue moving.

Archive resolved design notes and undo the last local batch.

LOCAL WORKSPACE
Inbox
5design notes
Archived
0local resolutions
Review principle

Keep the original request visible, even after the note is resolved.

No notes selected
Design noteAreaPriorityOwner

Resolved in this local session

The original note and owner stay attached to the record.

    No notes archived yet.

    High

    Blocks a clear next action or access to important information.

    Medium

    Creates avoidable friction while the flow remains usable.

    Local archive updated

    No external issue tracker is connected.

    ``` Referência de código - Use os atributos data-coreui-* com este bundle, não data-bs-* copiados de outra biblioteca. - A tabela tem uma região identificada para rolagem horizontal local. - As cores de prioridade vêm acompanhadas dos rótulos explícitos Alta/Média. ### Seleção em lote e ação para desfazer o último lote IDs estáveis dos registros controlam os Sets de selecionados e arquivados, enquanto o Toast nativo controla a exibição da notificação. ``` const records=[{id:'R-201',title:'Explain the empty search result',detail:'Offer a way to clear the filter without losing the query.',area:'Search',priority:'High',owner:'Maya'},{id:'R-202',title:'Label the compact navigation icons',detail:'The collapsed sidebar needs understandable accessible names.',area:'Navigation',priority:'High',owner:'Jules'},{id:'R-203',title:'Keep form errors beside their fields',detail:'Retain entered values after a failed submission.',area:'Forms',priority:'High',owner:'Alex'},{id:'R-204',title:'Align the table’s numeric column',detail:'Right-align quantities so differences can be scanned.',area:'Tables',priority:'Medium',owner:'Sam'},{id:'R-205',title:'Clarify the download format',detail:'Show the file type before the visitor starts the download.',area:'Content',priority:'Medium',owner:'Maya'}];const archived=new Set(),selected=new Set();let lastBatch=[];const q=s=>document.querySelector(s),toast=coreui.Toast.getOrCreateInstance(q('#undo-toast'),{autohide:false}); function render(){const inbox=records.filter(r=>!archived.has(r.id));q('#inbox-rows').replaceChildren();q('#archive-list').replaceChildren();records.forEach(r=>{if(archived.has(r.id)){let li=document.createElement('li');li.className='list-group-item px-0';let title=document.createElement('strong'),detail=document.createElement('p');title.textContent=`${r.id} · ${r.title}`;detail.className='small text-body-secondary mb-0 mt-1';detail.textContent=`${r.owner} · ${r.detail}`;li.append(title,detail);q('#archive-list').append(li);return;}let tr=document.createElement('tr');tr.innerHTML='

    ';let cells=tr.children,check=tr.querySelector('input');check.setAttribute('aria-label',`Select ${r.id}: ${r.title}`);check.checked=selected.has(r.id);check.onchange=()=>{check.checked?selected.add(r.id):selected.delete(r.id);sync();};cells[1].querySelector('strong').textContent=r.title;cells[1].querySelector('p').textContent=r.detail;cells[2].textContent=r.area;let badge=tr.querySelector('.badge');badge.classList.add(r.priority==='High'?'bg-danger-subtle':'bg-warning-subtle',r.priority==='High'?'text-danger-emphasis':'text-warning-emphasis');badge.textContent=r.priority;cells[4].textContent=r.owner;q('#inbox-rows').append(tr);});q('#inbox-count').textContent=inbox.length;q('#archive-count').textContent=archived.size;q('#inbox-empty').hidden=inbox.length!==0;q('#archive-empty').hidden=archived.size!==0;sync();} function sync(){let total=records.length-archived.size;q('#selection').textContent=selected.size?`${selected.size} ${selected.size===1?'note':'notes'} selected`:'No notes selected';q('#archive').disabled=!selected.size;q('#select-all').disabled=!total;q('#select-all').checked=total>0&&selected.size===total;q('#select-all').indeterminate=selected.size>0&&selected.size{selected.clear();if(e.target.checked)records.filter(r=>!archived.has(r.id)).forEach(r=>selected.add(r.id));render();};q('#archive').onclick=()=>{lastBatch=[...selected];lastBatch.forEach(id=>archived.add(id));selected.clear();render();q('#toast-copy').textContent=`${lastBatch.length} ${lastBatch.length===1?'note was':'notes were'} archived locally. You can undo this most recent batch.`;q('#undo').disabled=false;toast.show();q('#result').textContent='The archive is local. No external issue tracker was changed.';};q('#undo').onclick=()=>{let count=lastBatch.length;lastBatch.forEach(id=>archived.delete(id));lastBatch=[];q('#undo').disabled=true;render();toast.hide();q('#result').textContent=`Restored ${count} ${count===1?'note':'notes'} to the inbox.`;};render(); ``` Referência de código - Selecionar tudo expõe os estados marcado, desmarcado e indeterminado. - Desfazer restaura exatamente os IDs do lote mais recente. - Todo o texto dos registros é inserido com textContent. ### Densidade original da fila Composição da página com cartões nativos de CoreUI e estilos de tabela. ``` html,body{min-height:0;height:auto}body{background:var(--cui-tertiary-bg)}.review-desk{max-width:1120px;padding:32px;margin:auto}.desk-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:28px}.eyebrow{color:var(--cui-primary);font-size:11px;font-weight:700;letter-spacing:.12em}h1{font-size:32px;line-height:1.2;margin:12px 0}.desk-heading p:last-child{font-size:15px;line-height:1.6}.metric{height:100%}.metric strong{display:inline-block;font-size:32px;line-height:1.2;margin:12px 10px 0 0}.metric span{font-size:12px;color:var(--cui-secondary-color)}.context-card{background:var(--cui-primary-bg-subtle);border-color:var(--cui-primary-border-subtle)}.context-card p{font-size:14px;line-height:1.6;color:var(--cui-primary-text-emphasis)}.batch-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px}.table{min-width:740px;font-size:14px}.table th,.table td{padding:16px}.table th:first-child,.table td:first-child{width:48px}.table td:nth-child(2){max-width:380px}.table td:nth-child(2) p{line-height:1.5}.table th{font-size:12px;color:var(--cui-secondary-color);font-weight:600}.empty-copy{padding:24px;margin:0}.decision-key{display:grid;grid-template-columns:max-content 1fr;align-items:start;gap:10px 14px;margin-top:24px;font-size:12px;color:var(--cui-secondary-color)}.decision-key p{margin:0;line-height:1.6}.toast-container{max-width:520px}[hidden]{display:none!important}@media(max-width:650px){.review-desk{padding:24px 14px}.desk-heading{flex-direction:column;gap:4px}h1{font-size:28px}.metric strong{font-size:28px}.batch-bar{padding:14px}.table-responsive:focus-visible{outline:3px solid var(--cui-primary);outline-offset:-3px}} ``` Referência de código - A largura de 740px da tabela é uma escolha da aplicação para facilitar a leitura, não um padrão de CoreUI. ## Configuração do agente de IA do sistema de design CoreUI ### Ponto de partida para implementação CoreUI para Bootstrap 5.9.0 verificado. O app.js fornecido espera a marcação completa da fila e não expõe nenhuma operação de rede. O wrapper HTML inclui o corpo completo da marcação; salve os exemplos fornecidos de interação e CSS com os nomes de arquivo referenciados aqui. ```

    COREUI · REVIEW OPERATIONS

    Keep the review queue moving.

    Archive resolved design notes and undo the last local batch.

    LOCAL WORKSPACE
    Inbox
    5design notes
    Archived
    0local resolutions
    Review principle

    Keep the original request visible, even after the note is resolved.

    No notes selected
    Design noteAreaPriorityOwner

    Resolved in this local session

    The original note and owner stay attached to the record.

      No notes archived yet.

      High

      Blocks a clear next action or access to important information.

      Medium

      Creates avoidable friction while the flow remains usable.

      Local archive updated

      No external issue tracker is connected.

      ``` ### Um prompt para seu projeto ``` Comece pela central de operações de revisão de CoreUI 5.9.0. Preserve as abas nativas e o aviso de desfazer usando atributos data-coreui, os cinco registros de revisão e o conjunto de IDs selecionados com um estado misto de seleção em massa derivado. Arquive o lote selecionado, exiba-o na aba de arquivados e permita desfazer para restaurar o último lote. Mantenha a rolagem horizontal da tabela contida e diferencie seleção de inclusão no arquivo. Use o pacote correspondente de CoreUI; não substitua os nomes de atributos de Bootstrap nem afirme que o arquivamento é feito no servidor. ``` ## Fontes e escopo do sistema de design CoreUI CoreUI para componentes gratuitos de Bootstrap 5.9.0. Os padrões do tema e as escolhas originais de densidade são diferenciados. O arquivamento e o desfazimento afetam somente os registros de exemplo locais. - Introdução CSS correspondente e JavaScript incluído no pacote. - Variáveis CSS Personalização do tema em tempo de execução. - Cores Papéis semânticos do tema. - Tipografia Fundamentos tipográficos nativos. - Abas Atributos de dados e semântica dos painéis. - Notificações Aviso persistente e métodos do componente. - Caixas de seleção Estados nativos das caixas de seleção. - Tabelas Composição de tabelas responsivas. ## Recursos relacionados ao sistema de design CoreUI ### daisyUI Um estúdio de convites nativo de CSS que demonstra os temas semânticos 5 de daisyUI, cores pareadas para conteúdo, seleção por botões de opção, controles de intervalo, validação do navegador e uma etapa de revisão em um diálogo real. ### Element Plus Use o modelo Transfer, os filtros e as opções desativadas reais de Element Plus para criar uma bancada de seleção de módulos, com cores, tamanhos de fonte e dimensões de controles verificados. ### Flowbite 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. - [Referência de implementação](https://coreui.io/bootstrap/docs/components/navs-tabs/) - [Fonte](https://coreui.io/bootstrap/docs/customize/color/) - [Fonte](https://coreui.io/bootstrap/docs/content/typography/) - [Fonte](https://coreui.io/bootstrap/docs/customize/css-variables/) - [Fonte](https://coreui.io/bootstrap/docs/layout/gutters/) - [Consulte a especificação de apoio](https://coreui.io/bootstrap/docs/getting-started/introduction/) - [Consulte a especificação de apoio](https://coreui.io/bootstrap/docs/customize/color/) - [Consulte a especificação de apoio](https://coreui.io/bootstrap/docs/content/typography/) - [Consulte a especificação de apoio](https://coreui.io/bootstrap/docs/components/navs-tabs/) - [Consulte a especificação de apoio](https://coreui.io/bootstrap/docs/forms/checks-radios/) - [Consulte a especificação de apoio](https://coreui.io/bootstrap/docs/components/toasts/) - [Consulte a especificação de apoio](https://coreui.io/bootstrap/docs/content/tables/) - [Referência de código](https://coreui.io/bootstrap/docs/components/navs-tabs/) - [Referência de código](https://coreui.io/bootstrap/docs/components/toasts/) - [Referência de código](https://coreui.io/bootstrap/docs/content/tables/) - [Introdução CSS correspondente e JavaScript incluído no pacote.](https://coreui.io/bootstrap/docs/getting-started/introduction/) - [Variáveis CSS Personalização do tema em tempo de execução.](https://coreui.io/bootstrap/docs/customize/css-variables/) - [Cores Papéis semânticos do tema.](https://coreui.io/bootstrap/docs/customize/color/) - [Tipografia Fundamentos tipográficos nativos.](https://coreui.io/bootstrap/docs/content/typography/) - [Abas Atributos de dados e semântica dos painéis.](https://coreui.io/bootstrap/docs/components/navs-tabs/) - [Notificações Aviso persistente e métodos do componente.](https://coreui.io/bootstrap/docs/components/toasts/) - [Caixas de seleção Estados nativos das caixas de seleção.](https://coreui.io/bootstrap/docs/forms/checks-radios/) - [Tabelas Composição de tabelas responsivas.](https://coreui.io/bootstrap/docs/content/tables/)