Breve Visão Geral

Os quadros definem áreas estruturadas dentro de um Layout Dinâmico ShoutOut e atuam como contêineres para widgets. Os quadros permitem controlar o layout, o alinhamento, o espaçamento e a capacidade de resposta enquanto organiza o conteúdo dentro da tela.

Este artigo explica como adicionar, estilizar, redimensionar e gerenciar quadros, incluindo comportamento de layout, regras de espaçamento e opções de alinhamento.

Estilo de Quadro

Você pode personalizar a aparência de um quadro na guia Estilo no saco de propriedades.

Você pode configurar:

• Raio de canto
• Largura da borda e cor da borda
• Cor de preenchimento

Adicionando Quadros

Você pode adicionar quadros das seguintes maneiras:

• Duplicar um quadro existente
• Selecione o ícone de adição que aparece ao passar o mouse sobre a borda externa da tela

Comportamento e limites do quadro:

• Até quatro quadros podem ser adicionados em uma única linha
• Não há limite para o número de quadros verticais
• Quando os quadros são adicionados ou removidos, a largura da tela é dividida uniformemente, para que todos os quadros sejam do mesmo tamanho
• A largura mínima do quadro é de 10% da tela

Layout e Redimensionamento

Os quadros oferecem suporte ao redimensionamento horizontal responsivo com base no relacionamento com quadros adjacentes.

Redimensionando quadros

• Redimensionar um quadro arrastando a borda compartilhada com outro quadro
• Os quadros só podem ser redimensionados a partir de um lado compartilhado com outro quadro
• A largura do quadro é calculada como uma porcentagem da largura da tela
• Um quadro não pode ser redimensionado menor que o seu conteúdo

Alinhamento de quadros

Os controles de alinhamento estão disponíveis quando quadros na mesma linha contêm diferentes quantidades de Conteúdo.

Você pode:

• Alinhar elementos verticalmente dentro de um quadro
• Alinhar elementos horizontalmente dentro de um quadro

Espaçamento do widget

Os quadros controlam o espaçamento vertical padrão entre widgets.

Você pode:

• Ajustar o espaçamento vertical padrão entre widgets no nível do quadro
• Substituir o espaçamento para um widget específico no nível do widget

Quadros em movimento

Você pode reposicionar quadros dentro da tela arrastando e soltando-os.

Os quadros podem ser movidos:

• Horizontalmente
• Verticalmente

Espaçamento interno

O espaçamento interno define a distância entre as bordas do quadro e os widgets dentro dele.

Para ajustar o espaçamento interno:

• Selecione o quadro
• Defina um valor de espaçamento uniforme para todos os lados, ou
• Selecione o ícone de bordas para controlar o espaçamento por lado

Se um widget cobrir completamente o quadro e impedir a seleção de quadros:

• Use os breadcrumbs para alternar a seleção entre o widget e o quadro

Notas técnicas

• É possível adicionar até quatro widgets seguidos dentro de um quadro