Elementos

Um Elemento é uma peça individual dentro de um frame, como um título, um botão, uma imagem, um campo de formulário ou qualquer outro componente que o frame renderiza. Elementos são o que você seleciona quando quer mudar uma parte de um frame sem regenerar tudo.

​

Selecionando um elemento

Use a ferramenta Edit na barra de ferramentas. Com o Edit ativo, clique dentro de um frame ativo para selecionar o elemento sob o cursor. O elemento selecionado recebe um contorno de destaque e um pequeno prompt em linha onde você pode pedir ao Agent para alterá-lo.

​

Agindo sobre um elemento selecionado

​

Peça ao Agent para alterá-lo

Peça ao Agent para atualizar o texto, a cor, o layout, o espaçamento ou o comportamento do elemento com o prompt em linha.

​

Trocar uma imagem diretamente

Selecione um elemento de imagem e a seção Image do Visual Editor mostra o caminho de origem com um botão Upload Image, para que você possa trocar o arquivo sem escrever um prompt.

​

Visual Editor

Selecionar um elemento abre o Visual Editor — um painel do lado direito emparelhado com o prompt em linha. O painel agrupa cada controle em seções claras para que você encontre o que precisa mais rápido: Text, Layout, Color e Border. (A seção Image também aparece quando você seleciona um elemento de imagem.)

​

Layout

A seção Layout é onde você ajusta como os elementos filhos se posicionam dentro de um contêiner sem passar pelo Agent. Selecione um contêiner flex, expanda o Layout e você terá:

• Alinhamento: um seletor de pontos 3×3 para onde os itens ficam ao longo de ambos os eixos dentro do contêiner.
• Direção: dois botões de seta que empilham os filhos em linha ou em coluna.
• Espaçamento (Gap): um valor em pixels para o espaço entre os itens. O ícone ao lado do campo Gap muda para corresponder à direção atual, para que você sempre saiba se está ajustando o espaçamento horizontal ou vertical. Ao lado dele, um ícone de seta alterna Distribute space between items, que empurra os filhos para as bordas opostas do contêiner.
• Espaço externo: campos por lado para o espaço fora do elemento (um campo por lado, com um alternador de vínculo para travar os quatro lados de uma vez).
• Espaço interno: campos para o espaço dentro do elemento ao longo de cada eixo, com um alternador de vínculo para ambos os eixos de uma vez.

A seção Layout só aparece quando pelo menos um controle de layout se aplica ao elemento selecionado. Nós de texto simples sem propriedades de espaçamento ou layout ocultam a seção completamente, para que o editor permaneça compacto. Para as seções Text, Color, Border e Image, veja o guia do Visual Editor.

​

Páginas relacionadas

• Canvas — visão geral e anatomia.
• Frames — os contêineres onde os Elementos vivem.
• Toolbar — onde a ferramenta Edit vive.
• Visual Editor — passo a passo completo de edição de elementos.