Fullscreen

Apresentação

O componente Fullscreen é responsável por criar containers que podem ocupar toda a tela do dispositivo. Ele é ideal para criar experiências imersivas, modais em tela cheia, visualizadores de mídia e interfaces que precisam de foco total do usuário.

Quando usar

• Para criar visualizadores de imagens
• Para exibir vídeos em tela cheia
• Para criar modais imersivos
• Para exibir apresentações
• Para criar interfaces de jogo
• Para mostrar dashboards em tela cheia
• Para exibir mapas interativos
• Para criar experiências de realidade virtual

Forma básica de uso

import { Fullscreen, View, Text, Image, Button, Video } from 'eitri-luminus';

// Fullscreen básico
<Fullscreen enabled>
  <View>Conteúdo em tela cheia</View>
</Fullscreen>

// Fullscreen desabilitado
<Fullscreen enabled={false}>
  <View>Conteúdo normal</View>
</Fullscreen>

// Fullscreen com classes personalizadas
<Fullscreen 
  enabled 
  className="bg-black text-white"
>
  <View className="p-8">
    <Text render="h1">Visualizador de Imagem</Text>
    <Image src="/imagem.jpg" alt="Imagem" />
  </View>
</Fullscreen>

// Fullscreen responsivo
<Fullscreen enabled className="p-4 md:p-8">
  <View>
    <Text render="h2">Conteúdo Responsivo</Text>
    <Text>Texto que se adapta ao tamanho da tela</Text>
  </View>
</Fullscreen>

// Fullscreen com identificador
<Fullscreen id="visualizador" enabled>
  <View>Visualizador de Conteúdo</View>
</Fullscreen>

// Fullscreen com layout flexível
<Fullscreen 
  enabled
  display="flex"
  flexDirection="column"
  alignItems="center"
  justifyContent="center"
>
  <View>Conteúdo centralizado</View>
</Fullscreen>

// Fullscreen para vídeo
<Fullscreen enabled className="bg-black">
  <Video 
    source="/video.mp4" 
    controls 
    className="w-full h-full object-contain"
  />
</Fullscreen>

// Fullscreen para apresentação
<Fullscreen enabled className="bg-gray-900 text-white">
  <View className="flex flex-col h-full">
    <View className="p-4 border-b">
      <Text render="h1">Apresentação</Text>
    </View>
    <View className="flex-1 p-8">
      <Text>Conteúdo da apresentação</Text>
    </View>
  </View>
</Fullscreen>

// Fullscreen com controles
<Fullscreen enabled>
  <View className="relative h-full">
    <View className="absolute top-4 right-4">
      <Button className="btn-sm">Fechar</Button>
    </View>
    <View className="h-full flex items-center justify-center">
      <Text>Conteúdo principal</Text>
    </View>
  </View>
</Fullscreen>

Propriedades

Propriedade	Tipo	Descrição
children	ReactNode	Conteúdo do fullscreen
enabled	boolean	Habilita/desabilita o modo tela cheia (padrão: false)
className	string	Classes CSS adicionais
id	string	Identificador único do componente

Heranças

O componente Fullscreen 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 posicionamento fixo quando habilitado
• Quando enabled é true, ocupa toda a tela (top-0, bottom-0, left-0, right-0)
• Usa z-index alto (z-50) para ficar acima de outros elementos
• Mantém a semântica HTML apropriada
• É 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 tamanhos de conteúdo
• Pode ser combinado com outros componentes
• Ideal para experiências imersivas
• Suporta classes CSS
• Pode ser usado para visualizadores de mídia
• Funciona bem com diferentes tipos de conteúdo
• Facilita a criação de interfaces em tela cheia