Chip Componentes

O que é

É a etiqueta "Frete grátis ×" que aparece em cima da lista de produtos quando você filtra, ou as tags "PHP", "Design" de um post. Você escreve <span sw-chip> com o texto. Para mudar a cor ou o jeito, acrescenta uma classe (class="sw-chip-pri"). Se colocar um <span class="sw-chip-x">×</span> dentro, clicar no × faz o chip encolher e sumir.

O visual é CSS. O × é JavaScript do SWCore: um único "ouvinte" na página inteira percebe o clique em qualquer .sw-chip-x, avisa com o evento sw:chip:remove, faz a animação de saída e tira o chip do HTML. Por isso funciona até em chip criado depois, por código. Diferente do Botão, as variações do Chip ainda são por classe, não por palavra dentro do atributo.

Quando usar

• Filtros ativos numa loja ou busca ("Até R$ 500 ×", "Em estoque ×") — o × tira o filtro.
• Tags / categorias de um post, projeto ou produto.
• Escolhas da pessoa num cadastro ("Seus interesses: Viagem, Culinária").
• Status curto numa tabela ("Pago", "Pendente") — para número/contador pequeno, prefira o Badge.

Comece aqui

1. 1

   Coloque o SWCore na página: o CSS no <head> e o JavaScript no fim do <body> (o JS só é preciso se você usar o ×).

   <link rel="stylesheet" href="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.css">
   
   <!-- fim do body -->
   <script src="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.js"></script>

2. 2

   Escreva o chip. Para cor, some uma classe.

   Design

   <span sw-chip class="sw-chip-pri">Design</span>

3. 3

   Quer que dê para remover? Coloque o × com a classe sw-chip-x. Clique nele:

   Frete grátis ×

   <span sw-chip class="sw-chip-pri">
     Frete grátis <span class="sw-chip-x" role="button" aria-label="Remover filtro">&times;</span>
   </span>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<div class="flx f-wr alc gap-2">
  <span class="t-mut t-pp">Filtros:</span>
  <span sw-chip class="sw-chip-sel sw-chip-pp" data-filtro="preco">
    Até R$ 500 <span class="sw-chip-x" role="button" aria-label="Remover filtro">&times;</span>
  </span>
  <span sw-chip class="sw-chip-sel sw-chip-pp" data-filtro="frete">
    Frete grátis <span class="sw-chip-x" role="button" aria-label="Remover filtro">&times;</span>
  </span>
</div>

<script>
  // o × só tira o chip da tela; aqui você refaz a busca sem aquele filtro
  document.addEventListener('sw:chip:remove', (e) => {
    const filtro = e.target.dataset.filtro;
    if (filtro) console.log('tirar o filtro', filtro); // ex.: atualizar a URL e recarregar a lista
  });
</script>

<div class="flx f-wr gap-2">
  <a href="/tag/seo" sw-chip class="sw-chip-pri">SEO</a>
  <a href="/tag/wordpress" sw-chip class="sw-chip-pri">WordPress</a>
  <a href="/tag/loja-virtual" sw-chip class="sw-chip-pri">Loja virtual</a>
</div>

<div class="flx f-wr gap-2" id="interesses">
  <button type="button" sw-chip class="sw-chip-out" aria-pressed="false">Viagem</button>
  <button type="button" sw-chip class="sw-chip-sel" aria-pressed="true">Culinária</button>
  <button type="button" sw-chip class="sw-chip-out" aria-pressed="false">Esportes</button>
</div>

<script>
  document.getElementById('interesses').addEventListener('click', (e) => {
    const chip = e.target.closest('[sw-chip]');
    if (!chip) return;
    const marcado = chip.classList.toggle('sw-chip-sel');   // liga/desliga
    chip.classList.toggle('sw-chip-out', !marcado);
    chip.setAttribute('aria-pressed', marcado);
  });
</script>

<div class="flx f-wr gap-2" id="tags">
  <span sw-chip class="sw-chip-suc">Tag A <span class="sw-chip-x" role="button" aria-label="Remover">&times;</span></span>
  <span sw-chip class="sw-chip-suc">Tag B <span class="sw-chip-x" role="button" aria-label="Remover">&times;</span></span>
</div>

<script>
  document.getElementById('tags').addEventListener('sw:chip:remove', (e) => {
    const chip = e.target;                         // o próprio [sw-chip]
    console.log('removeu:', chip.textContent.replace('×', '').trim());
  });
</script>

Eventos

Precisa de quê

• swcore.min.css — o visual.
• swcore.min.js — só para o × funcionar.
• swcore.compl.min.css — só se usar ícone swi-*.

Cuidados — erros comuns

• Escrever sw-chip="pri" não funciona: no Chip a cor é por classe, class="sw-chip-pri".
• O × tem que ter a classe sw-chip-x e estar dentro do chip. Um × solto ao lado não remove nada.
• O × só tira da tela. Se o chip representa um filtro ou uma escolha salva, ouça o sw:chip:remove e atualize a busca/o servidor.
• Coloque role="button" e aria-label no × para quem usa leitor de tela.
• Chip clicável (que marca/desmarca) deve ser <button type="button">, não <span> — assim funciona no teclado.

O que ele não faz

• Não tem cor inf nem tamanhos maiores que o padrão (só o pp, menor).
• Não dá para impedir a remoção: o sw:chip:remove avisa, mas o chip sai de qualquer jeito.
• O × é um <span>: não recebe foco pelo Tab nem responde ao Enter.