View

Apresentação

O View é o componente mais básico da biblioteca Luminus UI. Ele serve como um container flexível que pode ser usado para agrupar e organizar outros elementos na interface.

Quando usar

• Quando precisar criar um container simples para agrupar elementos
• Para criar layouts básicos
• Quando precisar adicionar interatividade (como cliques) em um grupo de elementos
• Para criar espaçamentos e alinhamentos entre elementos

Forma básica de uso

import { View } from 'eitri-luminus';

// Exemplo básico
<View>
  <Text>Conteúdo aqui</Text>
</View>

// Com interatividade
<View onClick={() => console.log('clicou')}>
  <Text>Clique aqui</Text>
</View>

// Exemplo com sendFocusToInput
<View sendFocusToInput>
  <Text>Clique para focar no input</Text>
  <Input id="meu-input" />
</View>

Propriedades

Propriedade	Tipo	Descrição
onClick	() => void	Função chamada quando o usuário clica no componente. Ao adicionar esta propriedade, toda a área do View se torna clicável, incluindo seu conteúdo.
sendFocusToInput	boolean	Quando true, renderiza o componente como um label, permitindo focar em inputs relacionados

Heranças

O componente View 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 View é um componente fundamental que serve como base para outros componentes mais complexos
• Por padrão, ele se comporta como um container flexível
• Pode ser estilizado usando as propriedades de estilo herdadas
• Suporta interatividade através da propriedade onClick
• Quando onClick é adicionado, o cursor muda para pointer para indicar que a área é clicável