Page

Apresentação

O Page é o componente raiz de uma tela. Além de servir como container do conteúdo, ele é responsável por integrar a tela com o dispositivo: define o título da página, a cor do viewport, a cor dos ícones da StatusBar e da NavigationBar e, opcionalmente, habilita o pull-to-refresh.

Quando usar

• Sempre como elemento mais externo de cada tela da aplicação
• Quando precisar definir o título da tela (aplicações web construídas com Eitri)
• Quando precisar ajustar a cor de fundo do viewport
• Quando precisar controlar a cor dos ícones da StatusBar ou da NavigationBar do dispositivo
• Quando a tela precisar de atualização por "puxar para atualizar"

Forma básica de uso

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

// Uso básico
<Page>
  <View>
    <Text>Conteúdo da tela</Text>
  </View>
</Page>

// Com título e cor de viewport
<Page title="Meus Pedidos" viewportColor="bg-base-100">
  <Text>Conteúdo da tela</Text>
</Page>

// Ajustando as cores dos ícones do sistema
<Page
  viewportColor="bg-neutral"
  statusBarTextColor="white"
  navigationBarColor="white">
  <Text>Conteúdo sobre fundo escuro</Text>
</Page>

// Com pull-to-refresh
<Page
  title="Feed"
  pullToAction={{
    onRefresh: async () => await carregarDados(),
    configuration: { pullDownThreshold: 80 }
  }}>
  <Text>Puxe para atualizar</Text>
</Page>

Propriedades

Propriedade	Tipo	Descrição
title	string	Define o título da página; voltado para aplicações web construídas com Eitri
viewportColor	string	Classe de cor aplicada ao viewport onde a aplicação é executada (ex: bg-base-100)
statusBarTextColor	'white' | 'black'	Define a cor dos ícones da StatusBar do dispositivo
navigationBarColor	'white' | 'black'	Define a cor dos ícones da NavigationBar do dispositivo
pullToAction	PagePullToActionProps	Habilita o pull-to-refresh na tela, envolvendo o conteúdo em um PullToAction
children	ReactNode	Conteúdo renderizado dentro da página

PagePullToActionProps

Aceita as mesmas propriedades do componente PullToAction, exceto children:

Propriedade	Tipo	Descrição
onRefresh	() => Promise<void>	Função assíncrona executada ao puxar
configuration	PullToActionConfig	Configurações opcionais do gesto

Heranças

O componente Page 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

• Deve haver apenas um Page por tela, sempre como elemento mais externo
• statusBarTextColor e navigationBarColor só têm efeito dentro do Eitri-Play; em ambiente web são ignorados silenciosamente
• As cores dos ícones do sistema são reaplicadas quando a página volta a ficar visível, evitando que o sistema operacional as sobrescreva ao retornar de segundo plano
• viewportColor adiciona a classe informada ao elemento raiz e ao body — trocar o valor não remove a classe anterior
• Alterações em title, viewportColor, statusBarTextColor e navigationBarColor são aplicadas também quando as props mudam, não apenas na montagem
• Quando pullToAction é informado, o conteúdo é envolvido por um PullToAction; nesse caso não use outro PullToAction na mesma tela