Aba Elementos
Gerencie elementos e camadas no Template Designer.
A aba Elements é o centro de controle para gerenciar a estrutura do seu modelo. Aqui, você pode adicionar novos componentes visuais ao canvas e gerenciar a ordem de empilhamento (camadas) dos elementos existentes.
Gerenciamento vs Configuração
A aba Elements é exclusivamente para adicionar, reordenar e excluir elementos. Para configurar propriedades como posição, fonte, conteúdo ou tamanho, use a aba Style.
Adicionando elementos
Para adicionar um componente ao seu modelo, basta clicar em um dos botões na grade "Add Elements". O novo elemento aparecerá no canvas e será adicionado ao topo da lista de Layers.
| Tipo de elemento | Descrição |
|---|---|
| Text | Um bloco de texto padrão. Pode ser texto estático ou mapeado a dados. |
| Image | Uma imagem estática (ex.: logotipo, assinatura). |
| Barcode | Gera um código de barras (Code39, Code128, etc.) a partir dos dados. |
| QR Code | Gera um QR Code 2D a partir dos dados. |
| Static Table | Uma grade fixa para layouts como cabeçalhos ou caixas de informação. |
| Group Table | Uma tabela dinâmica que itera sobre os dados de transação. |
Tipos de elemento adicionais
Elementos Rect (retângulo) e Line (linha) também são suportados, mas só podem ser adicionados editando o arquivo YAML do modelo diretamente. Eles não estão disponíveis pelos botões da interface do Designer.
Painel de camadas e Z-Order
A lista de Layers na parte inferior da aba mostra todos os elementos na página atual. A ordem desta lista determina a Ordem de desenho (Z-Index) e a Ordem de fluxo para posicionamento relativo.
Gerenciando camadas
- Seleção: Clique em uma camada para selecionar o elemento.
- Reordenar:
- Seta para cima (↑): Move o elemento para CIMA na lista (Visualmente: para o fundo).
- Seta para baixo (↓): Move o elemento para BAIXO na lista (Visualmente: para a frente).
- Excluir: Clique no ícone da Lixeira para remover o elemento.
Entendendo o Z-Order (Empilhamento)
A ordem dos elementos na lista determina a ordem de empilhamento (z-index).
- Topo da lista = Desenhado primeiro (Fundo)
- Final da lista = Desenhado por último (Frente)
Se dois elementos se sobrepõem (ex.: texto sobre uma imagem), o elemento mais abaixo na lista aparecerá por cima do elemento mais acima na lista.
Estudo de caso: Posicionamento relativo e ordem de camadas
Quando você define a posição de um elemento como Relative na aba Style, a ordem das camadas se torna fundamental.
Regra de posicionamento relativo
Um elemento "Relativo" se posiciona com base no canto inferior esquerdo do elemento anterior na lista de camadas.
Cenário de exemplo
Imagine que você tem dois elementos de texto:
- "Report Title" (Texto estático, fonte grande)
- "Date" (Texto variável, fonte pequena)
Você quer que a Date apareça automaticamente abaixo do Report Title, independentemente do tamanho do título.
Configuração correta
Ordem das camadas:
- Report Title (Primeiro na lista)
- Date (Segundo na lista) -> Posição: Relative
Resultado: A Date verifica o elemento imediatamente anterior (Report Title), calcula onde o título termina e se posiciona diretamente abaixo dele.
Configuração incorreta
Ordem das camadas:
- Date (Primeiro na lista) -> Posição: Relative
- Report Title (Segundo na lista)
Resultado: A Date não tem "elemento anterior" (ou olha para a margem da página), então permanece no topo. O Report Title é desenhado depois da Date, potencialmente sobrepondo-a ou aparecendo no lugar errado.
Melhor prática
Ao construir layouts baseados em fluxo (como o corpo de uma carta), certifique-se de que a lista de camadas corresponda à ordem de leitura (de cima para baixo).