SWCore / CSS / Badge

Badge CSS

Selo pequeno de contagem/status — número de notificações, "Novo", pontinho pulsando, ou flutuando no canto de outro elemento.

O que é

Rótulo compacto em <span sw-badge>, com o texto dentro.

Como funciona

100% CSS, sem JS. out combina com uma cor (out pri) pra virar contorno. dot vira só um pontinho de status (pulsa, sem texto). fl flutua no canto superior direito — precisa que o PAI tenha a classe .bdg-wrap (ela é quem vira position:relative).

Exemplos

Cores e contorno Ao vivo

Novo Ativo 3 Beta Pendente

<span sw-badge="err">3</span>
<span sw-badge="out pri">Beta</span>

Pontinho de status (dot) — pulsa Ao vivo

Online

Ausente

Ocupado

<span sw-badge="dot suc"></span> Online

Flutuante no canto (fl + .bdg-wrap) Ao vivo

9 MR

<!-- o badge com "fl" senta no canto sup. direito do pai .bdg-wrap -->
<span class="bdg-wrap">
  <button sw-btn="pri"><i class="swi-bell"></i> Avisos</button>
  <span sw-badge="fl err pp">9</span>
</span>

<span class="bdg-wrap">
  <span sw-avt="g">MR</span>
  <span sw-badge="dot fl suc"></span>
</span>

Atributos

Nenhum.

Variantes

pri · sec · suc · ale · err · inf · drk (sem token = neutro)

cor de fundo

out

só contorno — combine com uma cor, ex.: "out pri"

pp · p · m · g · gg · xg

escala de tamanho completa

dot

só um pontinho de status, pulsando, sem texto

fl (com .bdg-wrap no pai)

flutua no canto superior direito do elemento pai

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

Nenhuma.

Limitações — o que ele não faz

Nenhuma.

← AnteriorAvatar Próximo →Breadcrumb