Artboard

Apresentação

O componente Artboard é responsável por criar containers que simulam diferentes tamanhos de dispositivos e telas. É ideal para criar mockups, demonstrações responsivas e visualizações de como o conteúdo apareceria em diferentes dispositivos.

Quando usar

• Para criar mockups de dispositivos
• Para demonstrar responsividade
• Para mostrar designs em diferentes telas
• Para criar previews de aplicações
• Para exibir protótipos
• Para demonstrar layouts responsivos
• Para criar apresentações de design
• Para mostrar variações de interface

Forma básica de uso

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

// Artboard básico
<Artboard>
  <View>
    <Text>Conteúdo do artboard</Text>
  </View>
</Artboard>

// Artboard com classes personalizadas
<Artboard className="artboard-horizontal">
  <View className="p-4">
    <Text render="h1">Layout Horizontal</Text>
    <Text>Conteúdo do artboard</Text>
  </View>
</Artboard>

// Artboard responsivo
<Artboard className="w-full md:w-auto">
  <View className="p-4">
    <Text render="h2">Artboard Responsivo</Text>
    <Text>Conteúdo que se adapta</Text>
  </View>
</Artboard>

// Artboard com identificador
<Artboard id="mockup-mobile">
  <View className="p-4">
    <Text render="h3">Mockup Mobile</Text>
    <Text>Simulação de tela mobile</Text>
  </View>
</Artboard>

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

// Artboard para diferentes dispositivos
<Artboard className="artboard-demo">
  <View className="p-4">
    <Text render="h4">Demo Artboard</Text>
    <Text>Demonstração de layout</Text>
  </View>
</Artboard>

// Artboard com margens e padding
<Artboard 
  margin="4"
  padding="6"
>
  <View>
    <Text>Conteúdo com espaçamento</Text>
  </View>
</Artboard>

// Artboard para apresentações
<Artboard className="bg-white shadow-lg">
  <View className="p-6">
    <Text render="h5">Apresentação</Text>
    <Text>Conteúdo para apresentação</Text>
  </View>
</Artboard>

Propriedades

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

Heranças

O componente Artboard 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 'artboard' para estilização base
• 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 mockups e demonstrações
• Suporta classes CSS
• Pode ser usado para criar protótipos
• Funciona bem com diferentes tipos de conteúdo
• Facilita a visualização de layouts responsivos