Divider

Apresentação

O componente Divider é responsável por criar separadores visuais que ajudam a organizar e estruturar o conteúdo da página. Ele oferece uma forma simples e eficaz de criar divisões entre seções, elementos ou grupos de conteúdo.

Quando usar

• Para separar seções de conteúdo
• Para dividir elementos de lista
• Para criar separadores em formulários
• Para organizar layouts de página
• Para separar grupos de informações
• Para criar divisões em menus
• Para organizar conteúdo de cards
• Para separar diferentes tipos de conteúdo

Forma básica de uso

import { Divider, View, Text, Input, Navigation, Link, Form } from 'eitri-luminus';

// Divider básico
<Divider />

// Divider com texto
<Divider>Seção 1</Divider>

// Divider com classes personalizadas
<Divider className="divider-primary">Destaque</Divider>

// Divider para separar seções
<View>
  <Text className="text-2xl font-bold">Seção 1</Text>
  <Text>Conteúdo da seção 1</Text>
  <Divider />
  <Text className="text-2xl font-bold">Seção 2</Text>
  <Text>Conteúdo da seção 2</Text>
</View>

// Divider com id personalizado
<Divider id="separador-principal">Principal</Divider>

// Divider para formulário
<Form>
  <Input type="text" placeholder="Nome" />
  <Divider>Informações Pessoais</Divider>
  <Input type="email" placeholder="Email" />
  <Divider>Informações de Contato</Divider>
  <Input type="tel" placeholder="Telefone" />
</Form>

// Divider responsivo
<Divider className="divider-sm md:divider-lg">Responsivo</Divider>

// Divider com alinhamento
<Divider className="divider-start">Alinhado à esquerda</Divider>
<Divider className="divider-center">Centralizado</Divider>
<Divider className="divider-end">Alinhado à direita</Divider>

// Divider para menu
<Navigation>
  <Link href="#">Início</Link>
  <Divider />
  <Link href="#">Sobre</Link>
  <Divider />
  <Link href="#">Contato</Link>
</Navigation>

// Divider com conteúdo complexo
<Divider>
  <View className="flex items-center gap-2">
    <Text>📋</Text>
    <Text>Lista de Tarefas</Text>
  </View>
</Divider>

// Divider para cards
<View className="card">
  <Text className="text-xl font-semibold">Título do Card</Text>
  <Divider />
  <Text>Conteúdo do card</Text>
</View>

// Divider com cores personalizadas
<Divider className="divider-accent">Acentuado</Divider>
<Divider className="divider-secondary">Secundário</Divider>
<Divider className="divider-warning">Aviso</Divider>

// Divider para timeline
<View className="timeline">
  <View className="timeline-item">Evento 1</View>
  <Divider />
  <View className="timeline-item">Evento 2</View>
  <Divider />
  <View className="timeline-item">Evento 3</View>
</View>

// Divider com espaçamento personalizado
<Divider className="my-8">Com espaçamento</Divider>

// Divider para dashboard
<View className="dashboard">
  <View className="stat">Estatística 1</View>
  <Divider />
  <View className="stat">Estatística 2</View>
  <Divider />
  <View className="stat">Estatística 3</View>
</View>

Propriedades

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

Heranças

O componente Divider 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 'divider' 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 organização visual
• Suporta estilos inline e classes CSS
• Pode ser usado para diferentes tipos de separação
• Funciona bem com formulários e listas
• Facilita a organização de conteúdo
• Suporta alinhamento flexível
• Interface simples e eficaz