Explore a implementação de Bootstrap de Queensland em um seletor de recursos ilustrado e completo, com funções de tema reais, estilo nativo de caixas de seleção e um diálogo acessível de revisão.
Valor exportado pela implementação. As cores originais das ilustrações dos recursos e os cantos de 8px dos cartões são escolhas do exemplo, não tokens adicionais do tema oficial.
--qld-body-font-size
1rem
Valor exportado pela implementação. As cores originais das ilustrações dos recursos e os cantos de 8px dos cartões são escolhas do exemplo, não tokens adicionais do tema oficial.
--qld-body-line-height
1.5
Valor exportado pela implementação. As cores originais das ilustrações dos recursos e os cantos de 8px dos cartões são escolhas do exemplo, não tokens adicionais do tema oficial.
--qld-border-radius
.25rem
Valor exportado pela implementação. As cores originais das ilustrações dos recursos e os cantos de 8px dos cartões são escolhas do exemplo, não tokens adicionais do tema oficial.
--qld-border-radius-sm
.25rem
Valor exportado pela implementação. As cores originais das ilustrações dos recursos e os cantos de 8px dos cartões são escolhas do exemplo, não tokens adicionais do tema oficial.
--qld-border-radius-lg
.25rem
Valor exportado pela implementação. As cores originais das ilustrações dos recursos e os cantos de 8px dos cartões são escolhas do exemplo, não tokens adicionais do tema oficial.
--qld-border-radius-xl
1rem
Valor exportado pela implementação. As cores originais das ilustrações dos recursos e os cantos de 8px dos cartões são escolhas do exemplo, não tokens adicionais do tema oficial.
--qld-border-radius-xxl
2rem
Valor exportado pela implementação. As cores originais das ilustrações dos recursos e os cantos de 8px dos cartões são escolhas do exemplo, não tokens adicionais do tema oficial.
--qld-border-radius-pill
50rem
Valor exportado pela implementação. As cores originais das ilustrações dos recursos e os cantos de 8px dos cartões são escolhas do exemplo, não tokens adicionais do tema oficial.
--qld-modal-border-radius
var(--qld-border-radius-lg)
Valor exportado pela implementação. As cores originais das ilustrações dos recursos e os cantos de 8px dos cartões são escolhas do exemplo, não tokens adicionais do tema oficial.
--qld-modal-title-line-height
1.5
Valor exportado pela implementação. As cores originais das ilustrações dos recursos e os cantos de 8px dos cartões são escolhas do exemplo, não tokens adicionais do tema oficial.
03
Sistema de design Queensland Government Guia completo
Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real.
DESIGN-queensland.md
Orientações completas, um ponto de partida para a implementação e links para o código-fonte.
Sistema de design Queensland Government Escolha uma implementação do Queensland
Identifique precisamente o ambiente de execução
O Queensland documenta vários caminhos de implementação. Este estudo usa o pacote público @qld-gov-au/qgds-bootstrap5 na versão 2.4.1, com o comportamento do modal Bootstrap. Ele não afirma usar a linha mais recente de componentes web Lit. Manter visíveis o nome e a versão da implementação evita que leitores confundam componentes com nomes semelhantes, mas regras de inicialização incompatíveis.
Separe exemplos estáveis de linhas em desenvolvimento
O repositório oficial de componentes web identifica a linha atual como alfa, enquanto o caminho Vanilla mais antigo é uma implementação de referência separada. O exemplo executável segue um único caminho testado baseado em Bootstrap. Uma migração futura deve verificar novamente a marcação, os nomes dos tokens e os contratos dos componentes, em vez de apenas substituir a URL de uma folha de estilos.
Sistema de design Queensland Government Funções do tema e ilustração dos recursos
Leia em conjunto as funções claras e escuras
A tabela de parâmetros inclui pares de funções para temas claro e escuro do pacote real. As ações principais, as cores dos links, o foco e as funções de texto mudam conforme o contexto da superfície. O pacote de recursos atual usa uma composição clara; as entradas escuras são valores de referência, não indicam que a página tenha um controle para alternar o tema.
Use ilustrações sem inventar tokens de marca
Cada cartão contém um desenho original de documento numerado. Os quatro fundos suaves das ilustrações diferenciam os tipos de recurso criados para o exemplo. Essas cores e o raio externo de 8px dos cartões fazem parte do estilo da aplicação e são identificados separadamente da tabela de funções publicada. A biblioteca fornece os botões reais, o tratamento das caixas de seleção e o estilo do modal, que servem de base para a interface.
Sistema de design Queensland Government Escala tipográfica e conteúdo dos cartões
Carregue a fonte usada no corpo do texto
A função de corpo do texto do pacote usa a família sem serifa com tamanho de 1rem e entrelinha de 1.5. A prévia carrega as fontes Noto Sans localmente para não depender de uma solicitação remota ao Google Fonts. Títulos, descrições e o status de quantidade selecionada continuam legíveis quando os cartões passam a uma única coluna.
Descreva cada recurso de forma útil
Cada cartão identifica um tipo, um tempo estimado de leitura ilustrativo, um título concreto e uma finalidade breve. As durações são estimativas criadas para a oficina, não dados de análise de uso. O rótulo da seleção repete o nome do recurso para que a ação continue clara quando encontrada separadamente por uma tecnologia assistiva. O cartão inteiro não se torna uma área de clique ambígua.
Sistema de design Queensland Government Seleção por caixas de seleção e feedback derivado
Mantenha a ação de revisão indisponível quando não houver seleção
Caixas de seleção independentes permitem qualquer combinação dos quatro recursos. Um Set armazena os índices selecionados; a quantidade e a lista de revisão são derivadas desse estado. A revisão da seleção fica desativada enquanto o Set estiver vazio. Assim, evita-se abrir um diálogo sem conteúdo útil, e a contagem zero visível explica o motivo.
Use caixas de seleção independentes para uma lista com vários recursos.
Derive a quantidade selecionada dos mesmos dados usados no diálogo.
Identifique o recurso no rótulo de cada caixa de seleção.
Limpe a confirmação anterior quando houver alterações
Sistema de design Queensland Government Diálogo de revisão e retorno do foco
Use o modal nativo para delimitar a revisão
A instância do modal Bootstrap abre um diálogo identificado pelo título. O corpo contém os nomes dos recursos selecionados no momento, e as ações permitem continuar editando ou confirmar localmente. Escape e o controle de fechar dispensam o diálogo. A aplicação devolve o foco a Revisar seleção quando o evento nativo de ocultação é disparado.
Evite corridas desnecessárias durante as transições
O exemplo omite a classe opcional fade. Assim, uma confirmação rápida ou a tecla Escape fecha o diálogo imediatamente, em vez de ser ignorada enquanto a transição de abertura ainda está em andamento. O modal continua gerenciando o foco e o comportamento do fundo sobreposto. Não se deve depender do movimento para entender se uma ação de revisão foi concluída.
Sistema de design Queensland Government Implementação completa do pacote de recursos
Recrie o estudo local exato
Crie um projeto Vanilla com Vite e instale o pacote QGDS Bootstrap fixado, junto com Bootstrap e Noto Sans. Use o caminho exportado qld.bootstrap.css do pacote, em vez de presumir um caminho interno em dist. Salve o arquivo de entrada completo e queensland.css com um elemento raiz de montagem. O código-fonte inclui todos os registros de recursos, as ilustrações SVG originais, a lógica de seleção e as transições do modal.
Instale o pacote QGDS Bootstrap fixado e a fonte pública.
Use o caminho exportado da folha de estilos com o arquivo de entrada completo e CSS.
Selecione dois recursos e teste Escape e o retorno do foco.
Confirme localmente, edite a seleção e verifique se o resultado anterior é limpo.
Defina regras intencionais para transições do modal e foco
O caminho QGDS Bootstrap usa o modal Bootstrap, portanto o fechamento deve seguir o ciclo de vida nativo do modal. Devolva o foco a Revisar seleção após hidden.bs.modal, em vez de estimar um atraso. Se fade for adicionado depois, leve em conta o período de transição: uma solicitação imediata de ocultação durante a abertura pode ser ignorada.
Gere a lista de revisão com base na seleção atual ao abrir o modal e invalide qualquer confirmação local anterior quando uma caixa de seleção mudar. Escape deve dispensar a revisão sem alterar as seleções. Manter as áreas de interação das caixas de seleção separadas das ilustrações dos cartões evita comportamentos concorrentes de clique no cartão inteiro e dá a cada recurso um rótulo de seleção acessível e preciso.
Sistema de design Queensland Government Exemplos de componentes do sistema de design
main.js — seleção completa de recursos e revisão no modal
Dados originais completos, ilustrações, estado das caixas de seleção e integração com o modal nativo.
javascript
import Modal from 'bootstrap/js/dist/modal';
import '@qld-gov-au/qgds-bootstrap5/qld.bootstrap.css';
import '@fontsource/noto-sans/latin-400.css';
import '@fontsource/noto-sans/latin-700.css';
import './queensland.css';
const resources=[['Conversation planner','A short structure for a useful team discussion.','Guide','10 min'],['Observation notes','Capture what happened before interpreting why.','Worksheet','15 min'],['Decision record','Keep a reasoned account of the choice and its limits.','Template','10 min'],['Review checklist','Check content, keyboard behavior and narrow layouts.','Checklist','20 min']];document.getElementById('root').innerHTML=`<main><p class="eyebrow">QUEENSLAND DESIGN SYSTEM / ORIGINAL RESOURCE STUDY</p><h1>Build a workshop resource pack</h1><p class="lead">Choose useful sample resources, then review your local selection. No files are requested or sent.</p><div class="selection-bar"><p id="count" role="status">0 resources selected</p><button id="review" class="btn btn-primary" disabled>Review selection</button></div><div class="resource-grid">${resources.map(([title,desc,type,time],i)=>`<article class="resource-card"><div class="art art-${i}" aria-hidden="true"><span>${String(i+1).padStart(2,'0')}</span><svg viewBox="0 0 160 90"><rect x="20" y="10" width="120" height="70" rx="4"/><path d="M38 30h84M38 45h58M38 60h70"/></svg></div><div class="card-body"><p class="meta">${type} · ${time}</p><h2>${title}</h2><p>${desc}</p><div class="form-check"><input class="form-check-input" type="checkbox" value="${i}" id="resource-${i}"><label class="form-check-label" for="resource-${i}">Add ${title.toLowerCase()}</label></div></div></article>`).join('')}</div><div id="review-modal" class="modal" tabindex="-1" aria-labelledby="review-heading" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><div class="modal-header"><h2 id="review-heading" class="modal-title fs-4">Review your resource pack</h2><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close review"></button></div><div class="modal-body"><p>These original resources form a local planning list.</p><ul id="review-list"></ul><p class="small">This preview does not produce files or contact a service.</p></div><div class="modal-footer"><button class="btn btn-secondary" data-bs-dismiss="modal">Keep editing</button><button id="confirm" class="btn btn-primary">Confirm local list</button></div></div></div></div><section id="result" hidden role="status"><h2>Local list ready</h2><p id="result-text"></p><button id="clear" class="btn btn-secondary">Clear the list</button></section></main>`;const selected=new Set();const $=id=>document.getElementById(id);const modal=new Modal($('review-modal'));document.querySelectorAll('.form-check-input').forEach(input=>input.addEventListener('change',()=>{const i=Number(input.value);input.checked?selected.add(i):selected.delete(i);$('count').textContent=selected.size+' resource'+(selected.size===1?'':'s')+' selected';$('review').disabled=!selected.size;$('result').hidden=true}));$('review').addEventListener('click',()=>{$('review-list').replaceChildren(...[...selected].sort().map(i=>{const li=document.createElement('li');li.textContent=resources[i][0];return li}));modal.show()});$('review-modal').addEventListener('hidden.bs.modal',()=>$('review').focus());$('confirm').addEventListener('click',()=>{$('result-text').textContent=[...selected].sort().map(i=>resources[i][0]).join(', ')+'. Your selection is held only until this page reloads.';$('result').hidden=false;modal.hide()});$('clear').addEventListener('click',()=>{selected.clear();document.querySelectorAll('.form-check-input').forEach(i=>i.checked=false);$('count').textContent='0 resources selected';$('review').disabled=true;$('result').hidden=true;document.querySelector('.form-check-input').focus()});
As cores das ilustrações e a geometria externa dos cartões são escolhas originais da aplicação.
04
Sistema de design Queensland Government Configuração do agente
Ponto de partida para implementação
A prévia incorpora recursos de fontes públicas e executa o comportamento do modal nativo; não há implementação de envio ao servidor.
sh
npm create vite@latest qld-resource-pack -- --template vanilla
cd qld-resource-pack
npm install
npm install @qld-gov-au/[email protected][email protected] @fontsource/noto-sans
# Replace src/main.js and add src/queensland.css. Keep <div id="root"></div>.
npm run dev
Um prompt para seu projeto
Prompt para agente de IA
Crie o estudo do pacote de recursos de Queensland com QGDS Bootstrap 2.4.1, funções reais da paleta e o Modal nativo. Preserve os rótulos das caixas de seleção, a contagem derivada, a revisão desativada quando estiver vazia, Escape, o retorno do foco e a limpeza de resultados obsoletos. Mantenha as ilustrações originais distintas dos tokens oficiais do tema e não sugira que haja entrega real de recursos.
05
Sistema de design Queensland Government Fontes e escopo
Um estudo original de pacote de recursos OpenDesign que usa QGDS Bootstrap 2.4.1. Esta é a implementação Bootstrap, não o fluxo alfa de componentes web; as seleções são locais e nenhum recurso é enviado.
