Stack

Apresentação

O componente Stack é responsável por criar layouts empilhados onde os elementos são organizados verticalmente ou horizontalmente com espaçamento consistente. Ele oferece uma estrutura flexível para organizar conteúdo em pilhas ordenadas.

Quando usar

• Para organizar elementos em pilha
• Para layouts de cartões empilhados
• Para listas de itens organizados
• Para organizar conteúdo vertical
• Para layouts de timeline
• Para organizar elementos de formulário
• Para layouts de dashboard
• Para organizar componentes de interface

Forma básica de uso

import { Stack, View, Text, Button, TextInput, Link } from 'eitri-luminus';

// Stack básico
<Stack>
  <View>Item 1</View>
  <View>Item 2</View>
  <View>Item 3</View>
</Stack>

// Stack com classes personalizadas
<Stack className="stack-vertical">
  <View className="card">Card 1</View>
  <View className="card">Card 2</View>
  <View className="card">Card 3</View>
</Stack>

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

// Stack para formulário
<Stack className="stack-form">
  <TextInput type="text" placeholder="Nome" />
  <TextInput type="email" placeholder="Email" />
  <Button className="btn btn-primary">Enviar</Button>
</Stack>

// Stack responsivo
<Stack className="stack-sm md:stack-lg">
  <View>Responsivo 1</View>
  <View>Responsivo 2</View>
</Stack>

// Stack com espaçamento personalizado
<Stack className="gap-8">
  <View className="p-4 bg-blue-100">Item espaçado 1</View>
  <View className="p-4 bg-blue-100">Item espaçado 2</View>
</Stack>

// Stack para dashboard
<Stack className="stack-dashboard">
  <View className="stat-card">Estatística 1</View>
  <View className="stat-card">Estatística 2</View>
  <View className="stat-card">Estatística 3</View>
</Stack>

// Stack com alinhamento
<Stack className="stack-center">
  <View>Centralizado 1</View>
  <View>Centralizado 2</View>
</Stack>

// Stack para lista de notificações
<Stack className="stack-notifications">
  <View className="notification">Notificação 1</View>
  <View className="notification">Notificação 2</View>
  <View className="notification">Notificação 3</View>
</Stack>

// Stack com conteúdo complexo
<Stack>
  <View className="card">
    <Text render="h3">Título 1</Text>
    <Text>Descrição detalhada</Text>
  </View>
  <View className="card">
    <Text render="h3">Título 2</Text>
    <Text>Descrição detalhada</Text>
  </View>
</Stack>

// Stack para menu
<Stack className="stack-menu">
  <Link className="menu-item">Início</Link>
  <Link className="menu-item">Sobre</Link>
  <Link className="menu-item">Contato</Link>
</Stack>

Propriedades

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

Heranças

O componente Stack 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 'stack' 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 de elementos
• Suporta estilos inline e classes CSS
• Pode ser usado para diferentes tipos de layout
• Funciona bem com cartões e listas
• Facilita a organização de conteúdo
• Suporta espaçamento consistente
• Interface limpa e organizada