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.
Design system Fomantic UI 2.9.4 CSS/modules com jQuery 3.7.1. A arte da capa e a ampliação do suporte à avaliação pelo teclado são originais. · Referência de implementação
02
Referência de design do sistema de design Fomantic UI
Fomantic UI 2.9.4 compilado CSS inspecionado diretamente. Estes são valores padrão no nível dos seletores do tema baseado em Less, não tokens CSS de tempo de execução inventados. As cores originais das capas e as dimensões da aplicação são identificadas separadamente.
Fomantic UI Vocabulário do sistema de design A CSS com módulos jQuery
Um vocabulário CSS com módulos jQuery
Fomantic UI combina sequências de classes semânticas com módulos opcionais com estado. A estante de leitura usa ui fluid card, ui teal button e ui basic label para definir a aparência. O menu suspenso e as avaliações são inicializados explicitamente por meio do jQuery. Carregar apenas a folha de estilos renderizaria os cartões, mas não ofereceria a mesma interação.
Este exemplo fixa as versões Fomantic UI 2.9.4 e jQuery 3.7.1. Ele inclui o módulo de transição antes de dropdown e, em seguida, rating. Deixar essas dependências visíveis é mais útil do que exibir uma fileira estática de estrelas e chamá-la de exemplo de biblioteca interativa. O módulo original da aplicação é executado somente depois que a marcação dos cartões existe.
Fomantic UI Os valores padrão compilados do sistema de design não são nomes de tokens em tempo de execução
Os valores padrão compilados não são nomes de tokens em tempo de execução
O tema padrão do Fomantic é criado por meio do Less. Por isso, a referência registra valores reais dos seletores, como o fundo do botão turquesa e o raio da borda do cartão. Ela não inventa um token --fomantic-primary API que o pacote compilado não expõe. Uma alteração mais ampla do tema deve usar os arquivos documentados de variáveis e de compilação do tema.
A variação turquesa nomeada é separada da variação azul primária. Nesta estante de leitura, a ação de adicionar à lista de seleção é turquesa, enquanto a arte original das capas usa tons de papel, sálvia e argila quente. Essas capas são ilustrações da aplicação, não amostras oficiais da paleta. Os valores de hover, foco e botão pressionado continuam sendo os padrões nativos do Fomantic.
Fomantic UI No sistema de design, raízes de 14px alteram a geometria
Rems de 14 pixels alteram a geometria
A folha de estilos padrão do site define o texto da raiz e do corpo em quatorze pixels. Assim, o raio de 0.28571429rem dos botões e cartões corresponde a aproximadamente quatro pixels. Copiar esse valor em rem para uma raiz não relacionada de dezesseis pixels produziria uma geometria diferente. Por isso, a referência inclui o tamanho da raiz, em vez de apresentar apenas um raio sem contexto.
Lato é a família preferencial, e o pacote compilado inclui arquivos de fonte locais. Esta prévia independente incorpora esses recursos de fonte em vez de solicitá-los a um serviço de fontes da Web. O título da página é uma substituição original de trinta e quatro pixels; as descrições dos cartões mantêm o texto compacto do corpo, com uma altura de linha mais generosa na aplicação.
Fomantic UI No sistema de design, a anatomia do cartão mantém o conteúdo separado das ações
A estrutura dos cards mantém o conteúdo e as ações separados
Cada cartão nativo contém uma capa decorativa, um bloco de conteúdo para o tema e a descrição, outro bloco de conteúdo para a avaliação e um bloco de conteúdo adicional para a ação de adicionar à lista de seleção. Os cartões fluidos preenchem a grade original de três colunas, em vez de usar a largura padrão de 290px do pacote. A página remove as margens de cada cartão para que a grade forneça espaçamentos uniformes.
As propostas envolvem diferentes tarefas de leitura: comparar o espaçamento entre letras, remover um elemento para estudar o espaço negativo e observar mudanças de cor conforme o contexto. As capas ecoam visualmente esses exercícios por meio de tipografia, retângulos e sobreposições de cores. São propostas originais explícitas e não implicam endosso de uma editora.
Fomantic UI No sistema de design, acione o comportamento nativo de avaliação para cada forma de entrada
Acione o comportamento nativo de avaliação em todas as formas de entrada
O módulo de avaliação é configurado com máximo de cinco e clearable true. onRate recebe o valor numérico atual e sincroniza a pontuação visível com o valor acessível do controle deslizante. A ação Limpar avaliação aciona o comportamento clear rating do módulo, em vez de remover classes ativas manualmente.
O módulo nativo de estrelas permite a interação com o mouse, mas este exemplo também adiciona um comportamento explícito para o teclado. O contêiner da avaliação é um controle deslizante identificado por um rótulo, com intervalo de zero a cinco. As teclas de seta alteram a avaliação em um ponto; Home limpa a avaliação e End seleciona cinco. Cada interação chama set rating, garantindo que as estrelas exibidas e o resultado da aplicação usem o mesmo estado do módulo.
Use Tab para acessar uma avaliação e pressione a seta para a direita duas vezes para selecionar dois de cinco.
Pressione End para selecionar cinco e, depois, Home para voltar a Sem avaliação.
Clique em uma estrela e confirme que o texto exibido e o valor acessível são atualizados juntos.
Fomantic UI No sistema de design, o filtro do menu suspenso preserva o estado oculto
A filtragem do menu suspenso preserva o estado oculto
O seletor de temas se transforma em um menu suspenso nativo do Fomantic por meio do inicializador dropdown. Seu retorno de chamada onChange oculta os cartões cujo tema não corresponde ao valor selecionado e atualiza a contagem de propostas visíveis. A opção Todos os temas restaura a estante completa. O componente usa o módulo de transição para animar o movimento do menu.
O filtro não destrói nem recria um cartão. As avaliações existentes e a inclusão na lista de seleção permanecem associadas aos registros originais enquanto estão ocultos. Esse comportamento é intencional: restringir a estante é uma forma de visualização, não um pedido para apagar as escolhas anteriores do usuário. Assim, o resumo pode mencionar um item que não aparece no filtro atual.
Sistema de design Fomantic UI: uma lista de seleção é independente de uma avaliação
Uma lista de favoritos não depende de uma avaliação
A avaliação expressa o interesse em uma escala de zero a cinco, enquanto fazer parte da lista de seleção é uma decisão separada, de sim ou não. A pessoa pode guardar um tópico para discussão antes de avaliá-lo. O botão da lista informa seu estado de seleção por meio de aria-pressed e alterna entre os rótulos Adicionar e Remover. O resumo obtém os nomes a partir de um conjunto de IDs de tópicos estáveis.
A região de status descreve os tópicos selecionados sem afirmar que uma coleção foi salva remotamente. Recarregar o navegador limpa este exemplo. Uma lista de leitura compartilhada de verdade precisaria de persistência, identidade do usuário e tratamento de conflitos; adicionar uma classe ao cartão não oferece esses recursos.
Sistema de design Fomantic UI: preserve o significado numérico além das estrelas decorativas
Preserve o significado numérico além das estrelas decorativas
Os ícones de estrela ficam ocultos para tecnologias assistivas, pois o controle deslizante pai expõe o valor numérico e o rótulo. Um texto visível — Não avaliado ou uma fração — transmite o mesmo significado sem exigir que a pessoa conte os ícones coloridos. Um contorno visível ao receber foco destaca o controle deslizante ativo, e o botão Limpar devolve o foco a esse controle.
As formas das capas dos livros também são decorativas. O título real do tópico, a duração e a descrição permanecem como texto dentro do cartão. Em telas estreitas, os cartões ficam empilhados no breakpoint original de 760px. O exemplo redefine para auto a altura da janela de visualização do body compilado e desativa o overflow horizontal oculto. Assim, a incorporação usa a altura real do conteúdo e não encobre falhas de layout.
Exponha o número atual em texto e como valor acessível.
Use botões nativos para limpar e alterar a lista de seleção.
Preserve os rótulos e as descrições completas quando a grade passar a ter uma única coluna.
Sistema de design Fomantic UI: inclua as fontes junto aos estilos ou empacote-as
Inclua as fontes junto aos estilos ou no pacote
Em um projeto comum, copie o diretório fomantic-ui-css completo em vez de extrair semantic.css e esquecer os recursos de temas. Os estilos compilados usam caminhos relativos para os arquivos de fontes Lato e de ícones. A configuração abaixo mantém esses caminhos intactos e carrega jQuery antes dos módulos do pacote.
A prévia local usa apenas os estilos e scripts necessários dos componentes e, em seguida, incorpora em um único documento os recursos referenciados por eles. Não há solicitações externas de fontes. Os empacotadores de produção podem processar esses recursos de outras maneiras, mas ainda é preciso testar o caminho da fonte e a ordem dos módulos na página entregue, em vez de presumir que funcionarão só porque a instalação com npm foi concluída com sucesso.
O valor padrão compilado height:100% do site é redefinido como auto para a incorporação.
O overflow do body não é usado para encobrir erros de layout.
04
Sistema de design Fomantic UI Configuração do agente
Ponto de partida para implementação
Verificado com Fomantic UI 2.9.4 e jQuery 3.7.1. O exemplo independente incorpora os recursos de fonte necessários; a configuração comum mantém os caminhos relativos ao pacote. O wrapper HTML inclui toda a marcação do body; salve os exemplos de interação e de CSS fornecidos com os nomes de arquivo referenciados aqui.
html
<!-- npm install [email protected][email protected] -->
<!-- Copy node_modules/fomantic-ui-css into public/vendor/fomantic-ui-css. -->
<!-- Copy node_modules/jquery/dist/jquery.min.js into public/vendor/jquery.min.js. -->
<link rel="stylesheet" href="/vendor/fomantic-ui-css/semantic.min.css">
<link rel="stylesheet" href="style.css">
<main class="reading-room"><header><div><p class="kicker">FOMANTIC UI · READING ROOM</p><h1>Make a shelf worth returning to.</h1><p class="intro">Rate three original reading prompts and build a local discussion shortlist.</p></div><span class="ui teal basic label">Local collection</span></header><div class="toolbar"><label for="topic">Show topic</label><select id="topic" class="ui selection dropdown"><option value="all">All topics</option><option value="type">Typography</option><option value="space">Space & rhythm</option><option value="color">Color</option></select><span id="visible-count">3 prompts</span></div><div class="book-grid"><article class="ui fluid card" data-topic="type" data-name="Letters in the margins"><div class="book-cover type-cover" aria-hidden="true"><span>Aa</span><small>FORM / COUNTERFORM</small></div><div class="content"><div class="meta">TYPOGRAPHY · 18 MIN</div><h2 class="header">Letters in the margins</h2><div class="description">Compare a narrow editorial column with a generous display line. Find where the rhythm changes.</div></div><div class="content"><label class="rating-label" id="label-type">Your interest</label><div class="ui huge star rating" data-rating="0" data-max-rating="5" role="slider" tabindex="0" aria-labelledby="label-type" aria-valuemin="0" aria-valuemax="5" aria-valuenow="0"></div><output class="score">Not rated</output><button class="ui tiny basic button clear-rating" type="button">Clear rating</button></div><div class="extra content"><button class="ui fluid teal button shortlist" aria-pressed="false">Add to shortlist</button></div></article><article class="ui fluid card" data-topic="space" data-name="The space between"><div class="book-cover space-cover" aria-hidden="true"><span></span><span></span><span></span><small>PAUSE / SEQUENCE</small></div><div class="content"><div class="meta">SPACE & RHYTHM · 12 MIN</div><h2 class="header">The space between</h2><div class="description">Remove one element from a crowded page. Rebalance the remaining space without adding decoration.</div></div><div class="content"><label class="rating-label" id="label-space">Your interest</label><div class="ui huge star rating" data-rating="0" data-max-rating="5" role="slider" tabindex="0" aria-labelledby="label-space" aria-valuemin="0" aria-valuemax="5" aria-valuenow="0"></div><output class="score">Not rated</output><button class="ui tiny basic button clear-rating" type="button">Clear rating</button></div><div class="extra content"><button class="ui fluid teal button shortlist" aria-pressed="false">Add to shortlist</button></div></article><article class="ui fluid card" data-topic="color" data-name="A color and its neighbor"><div class="book-cover color-cover" aria-hidden="true"><span></span><span></span><small>CONTEXT / CONTRAST</small></div><div class="content"><div class="meta">COLOR · 15 MIN</div><h2 class="header">A color and its neighbor</h2><div class="description">Place the same accent on two backgrounds. Describe the shift before changing its value.</div></div><div class="content"><label class="rating-label" id="label-color">Your interest</label><div class="ui huge star rating" data-rating="0" data-max-rating="5" role="slider" tabindex="0" aria-labelledby="label-color" aria-valuemin="0" aria-valuemax="5" aria-valuenow="0"></div><output class="score">Not rated</output><button class="ui tiny basic button clear-rating" type="button">Clear rating</button></div><div class="extra content"><button class="ui fluid teal button shortlist" aria-pressed="false">Add to shortlist</button></div></article></div><section class="ui message summary"><h2 class="header">Discussion shortlist</h2><p id="summary" role="status">No prompts selected. Add one to begin.</p><p class="scope">Ratings and selections stay in this browser page. These are original prompts, not published books.</p></section></main>
<script src="/vendor/jquery.min.js"></script>
<script src="/vendor/fomantic-ui-css/components/transition.min.js"></script>
<script src="/vendor/fomantic-ui-css/components/dropdown.min.js"></script>
<script src="/vendor/fomantic-ui-css/components/rating.min.js"></script>
<script src="app.js"></script>
<!-- Keep the themes/ assets beside the copied CSS. -->
Um prompt para seu projeto
Prompt para agente de IA
Amplie a lista de seleção da sala de leitura em Fomantic UI 2.9.4 usando a inicialização de módulos jQuery fornecida e os componentes Dropdown e Rating. Mantenha os três tópicos de leitura, o estado de avaliação e o comportamento local da lista de seleção conectados aos cartões visíveis. Preserve o suporte explícito ao teclado e a semântica de controle deslizante adicionados ao controle de avaliação, junto com os recursos correspondentes de tema e ícones. A lista de seleção deve impedir adições duplicadas e mostrar claramente seu conteúdo atual; ela não é um fluxo de trabalho para tickets de suporte nem um serviço remoto de recomendações.
05
Sistema de design Fomantic UI: fontes e escopo
Fomantic UI 2.9.4 com jQuery 3.7.1. Os valores do tema são padrões compilados; as ilustrações originais das capas e os aprimoramentos de teclado estão identificados. Todas as seleções permanecem locais.
