Indicator

Apresentação

O componente Indicator é responsável por criar elementos indicadores que podem ser usados para mostrar status, notificações ou posicionar elementos em relação a outros componentes. Ele oferece uma estrutura flexível para criar indicadores visuais.

Quando usar

• Para indicadores de notificação
• Para badges de status
• Para marcadores de posição
• Para indicadores de progresso
• Para badges de contagem
• Para indicadores de estado
• Para marcadores de seção
• Para indicadores de prioridade

Forma básica de uso

import { Indicator, View, Text } from 'eitri-luminus';

// Indicator básico
<Indicator>
  <View>Conteúdo com indicador</View>
</Indicator>

// Indicator com badge de notificação
<Indicator>
  <View className="indicator-item">
    <Text className="badge badge-primary">3</Text>
    <button className="btn">Notificações</button>
  </View>
</Indicator>

// Indicator com status
<Indicator>
  <View className="indicator-item">
    <Text className="badge badge-success">✓</Text>
    <View>Status Online</View>
  </View>
</Indicator>

// Indicator com classes personalizadas
<Indicator className="indicator-top indicator-start">
  <View className="indicator-item">
    <Text className="badge badge-warning">!</Text>
    <View>Alerta</View>
  </View>
</Indicator>

// Indicator para contador
<Indicator>
  <View className="indicator-item">
    <Text className="badge badge-secondary">12</Text>
    <View>Itens no carrinho</View>
  </View>
</Indicator>

// Indicator com id personalizado
<Indicator id="status-indicator">
  <View className="indicator-item">
    <Text className="badge badge-info">N</Text>
    <View>Novo</View>
  </View>
</Indicator>

// Indicator para progresso
<Indicator>
  <View className="indicator-item">
    <Text className="badge badge-accent">75%</Text>
    <View>Progresso</View>
  </View>
</Indicator>

// Indicator responsivo
<Indicator className="indicator-sm md:indicator-lg">
  <View className="indicator-item">
    <Text className="badge badge-primary">2</Text>
    <View>Responsivo</View>
  </View>
</Indicator>

// Indicator com posicionamento
<Indicator className="indicator-bottom indicator-end">
  <View className="indicator-item">
    <Text className="badge badge-warning">!</Text>
    <View>Posicionado</View>
  </View>
</Indicator>

// Indicator para prioridade
<Indicator>
  <View className="indicator-item">
    <Text className="badge badge-error">Alta</Text>
    <View>Prioridade</View>
  </View>
</Indicator>

// Indicator com conteúdo complexo
<Indicator>
  <View className="indicator-item">
    <View className="badge badge-primary">
      <Text>3</Text>
      <Text>Novos</Text>
    </View>
    <View>Conteúdo Complexo</View>
  </View>
</Indicator>

Propriedades

Propriedade	Tipo	Descrição
children	ReactNode	Conteúdo do indicator
className	string	Classes CSS adicionais
id	string	Identificador único do componente

Heranças

O componente Indicator herda todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

• Propriedades de estilo (margin, padding, etc)
• Propriedades de layout (flex, grid, etc)
• Propriedades de posicionamento
• Propriedades de acessibilidade
• Propriedades de identificação (id, data-e)

Observações

• O componente usa a classe 'indicator' para estilização base
• É responsivo por padrão
• Pode ser estilizado com classes do Tailwind
• Suporta propriedades de layout flexíveis
• Mantém a acessibilidade por padrão
• Pode ser usado em qualquer contexto de layout
• Suporta diferentes tipos de conteúdo
• Pode ser combinado com outros componentes
• Ideal para indicadores visuais
• Suporta estilos inline e classes CSS
• Pode ser usado para diferentes tipos de status
• Funciona bem com badges e notificações
• Facilita a criação de indicadores
• Suporta posicionamento flexível
• Interface simples e eficaz