Ir para o conteúdo principal
Frutjam logo Frutjam
v2.2.2
Theme

Componente Indicador

Última atualização:

Indicador CSS Tailwind somente CSS para sobreposição de emblemas ou pontos em qualquer canto do elemento. Variantes de cores e posicionamento. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.

Os componentes do indicador exibem status, emblemas ou notificações posicionadas em outros elementos. Construídos com posicionamento absoluto e estilo flexível, os indicadores sobrepõem informações importantes em cartões, avatares e botões. O sistema de indicadores Frutjam oferece suporte a vários posicionamentos, tamanhos e cores – ideal para emblemas de notificação, marcadores de status e dicas visuais.

Somente CSS, sem necessidade de JavaScript. WCAG AA acessível e independente de estrutura - funciona com Django, HTMX, Laravel, React e qualquer pilha.

Aula Tipo Descrição
indicatorBaseWrapper de posição relativa para o item indicador
indicator-itemModificadorDistintivo ou elemento de ponto absolutamente posicionado
indicator-topModificadorPosiciona o item na borda superior
indicator-middleModificadorPosiciona o item no meio vertical
indicator-bottomModificadorPosiciona o item na borda inferior
indicator-startModificadorPosiciona o item na borda esquerda
indicator-centerModificadorPosiciona o item no centro horizontal
indicator-endModificadorPosiciona o item na borda direita

Uso Básico

1
2
3
4
<div class="indicator">
  <span class="indicator-item badge badge-primary">99+</span>
  <button class="btn">Messages</button>
</div>

1
2
3
4
<div className="indicator">
  <span className="indicator-item badge badge-primary">99+</span>
  <button className="btn">Messages</button>
</div>

1
2
3
4
<div class="indicator">
  <span class="indicator-item badge badge-primary">99+</span>
  <button class="btn">Messages</button>
</div>

Posicionamentos de Indicadores

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<div class="indicator">
  <span class="indicator-item indicator-top indicator-start badge badge-primary">↖︎</span>
  <span class="indicator-item indicator-top indicator-center badge badge-secondary">↑</span>
  <span class="indicator-item indicator-top indicator-end badge badge-accent">↗︎</span>
  <span class="indicator-item indicator-middle indicator-start badge badge-info">←</span>
  <span class="indicator-item indicator-middle indicator-center badge badge-neutral">●</span>
  <span class="indicator-item indicator-middle indicator-end badge badge-success">→</span>
  <span class="indicator-item indicator-bottom indicator-start badge badge-warning">↙︎</span>
  <span class="indicator-item indicator-bottom indicator-center badge badge-primary">↓</span>
  <span class="indicator-item indicator-bottom indicator-end badge badge-error">↘︎</span>
  <div class="bg-base-200 grid h-32 w-60 place-items-center rounded-box">Box</div>
</div>

Indicador em guias

html 
1
2
3
4
5
6
7
8
<div class="tabs tabs-lifted">
  <a class="tab">Messages</a>
  <a class="indicator tab tab-active">
    Notifications
    <span class="indicator-item badge">7</span>
  </a>
  <a class="tab">Requests</a>
</div>

Indicador na entrada

html 
1
2
3
4
<div class="indicator">
  <span class="indicator-item badge badge-neutral badge-sm">Required</span>
  <input type="text" placeholder="Your email address" class="input" />
</div>

Indicador na imagem

html 
1
2
3
4
5
6
7
8
9
<div class="indicator">
  <span class="indicator-item indicator-middle indicator-center badge">
    Only available for Pro users
  </span>
  <img
    alt="Tailwind CSS examples"
    src=""
  />
</div>

Indicador em Cartões

html 
1
2
3
4
5
6
7
8
9
<div class="indicator">
  <span class="indicator-item badge badge-success">New</span>
  <div class="card card-outline">
    <div class="card-content">
      <h2 class="card-title">Product Name</h2>
      <p>Product description and details go here.</p>
    </div>
  </div>
</div>

Indicador no Avatar

html 
1
2
3
4
<div class="indicator">
  <span class="indicator-item indicator-top indicator-end badge badge-circle badge-success"></span>
  <div class="avatar">JS</div>
</div>

Comportamento Responsivo

html 
1
2
3
4
<div class="indicator">
  <span class="indicator-item indicator-bottom indicator-start sm:indicator-top sm:indicator-end badge badge-primary">New</span>
  <button class="btn">Responsive</button>
</div>

Usando Claude Code, Cursor ou outro editor de IA?

Cherry MCP fornece ao seu editor de IA os nomes exatos das classes Indicador e a estrutura sob demanda. Chega de aulas alucinadas.

Experimente o Cherry MCP