Webview

Apresentação

O componente Webview é responsável por criar iframes que podem exibir conteúdo HTML ou URLs externas. Ele suporta comunicação entre a aplicação principal e o conteúdo do iframe através de mensagens, sendo ideal para integrar conteúdo web externo ou criar aplicações híbridas.

Quando usar

Para integrar conteúdo web externo
Para exibir páginas de terceiros
Para criar aplicações híbridas
Para mostrar documentação online
Para exibir mapas interativos
Para integrar ferramentas externas
Para mostrar dashboards externos
Para exibir conteúdo de APIs

Forma básica de uso

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

// Webview com URL
<Webview url="https://www.exemplo.com" />

// Webview com HTML string
<Webview htmlString="<h1>Conteúdo HTML</h1><p>Texto do iframe</p>" />

// Webview com classes personalizadas
<Webview 
  url="https://www.exemplo.com"
  className="w-full h-96 border rounded-lg"
/>

// Webview responsivo
<Webview 
  url="https://www.exemplo.com"
  className="w-full h-64 md:h-96 lg:h-screen"
/>

// Webview com identificador
<Webview 
  id="webview-externo"
  url="https://www.exemplo.com"
/>

// Webview com comunicação de mensagens
<Webview 
  url="https://www.exemplo.com"
  domain="https://www.exemplo.com"
  onMessage={(data) => console.log('Mensagem recebida:', data)}
/>

// Webview com layout flexível
<Webview 
  url="https://www.exemplo.com"
  display="block"
  margin="4"
  width="100%"
  height="400px"
/>

// Webview para mapas
<Webview 
  url="https://www.google.com/maps/embed?pb=..."
  className="w-full h-96"
/>

// Webview para documentação
<Webview 
  url="https://docs.exemplo.com"
  className="w-full h-screen"
/>

// Webview com HTML personalizado
<Webview 
  htmlString={`
    <!DOCTYPE html>
    <html>
      <head>
        <title>Conteúdo Personalizado</title>
        <style>
          body { font-family: Arial, sans-serif; padding: 20px; }
        </style>
      </head>
      <body>
        <h1>Título Personalizado</h1>
        <p>Conteúdo do iframe</p>
      </body>
    </html>
  `}
  className="w-full h-64"
/>

// Webview com data-cy para testes
<Webview 
  url="https://www.exemplo.com"
  dataCy="webview-teste"
/>

// Webview dentro de um container
<View className="p-4">
  <Text as="h2" className="mb-4">Conteúdo Externo</Text>
  <Webview 
    url="https://www.exemplo.com"
    className="w-full h-96 rounded-lg"
  />
</View>

// Webview com título e descrição
<View className="space-y-4">
  <View>
    <Text as="h3" className="text-lg font-semibold">Mapa Interativo</Text>
    <Text className="text-gray-600">Visualize a localização no mapa</Text>
  </View>
  <Webview 
    url="https://www.google.com/maps/embed?pb=..."
    className="w-full h-96 border rounded-lg"
  />
</View>

Propriedades

Propriedade	Tipo	Descrição
`url`	`string`	URL a ser carregada no iframe
`htmlString`	`string`	Conteúdo HTML a ser exibido no iframe
`domain`	`string`	Domínio permitido para comunicação
`onMessage`	`(data: any) => void`	Função chamada quando mensagem é recebida
`dataCy`	`string`	Atributo data-cy para testes (padrão: "Webview")
`className`	`string`	Classes CSS adicionais
`id`	`string`	Identificador único do componente

Heranças

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

Suporta tanto URLs quanto HTML string
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 integração de conteúdo externo
Pode ser usado para diferentes tipos de conteúdo
Funciona bem com comunicação entre componentes
Facilita a criação de aplicações híbridas

Apresentação​

Quando usar​

Forma básica de uso​

Propriedades​

Heranças​

Observações​