Contêiner

Um contêiner contém os controles e outros contêineres dentro dele e os alinha da mesma forma.

Geral

• Dica de ferramentas — dica de ferramenta a ser exibida no contêiner. Use a dica para fornecer informações adicionais sobre o controle.

• Oculto — se verdadeiro, oculta o controle no tempo de execução.

• Desabilitado — se verdadeiro, desabilita o controle no tempo de execução.

Events

• Clicando em — Configure o que acontece ao se clicar no contêiner.

Estilo

• Alinhamento de controle — Por padrão, herda o alinhamento pai. É possível definir outro alinhamento que não o pai. Para voltar ao alinhamento padrão pai, desmarque as opções substituídas.

  Observação: o alinhamento depende do layout selecionado para o pai (Vertical vs Horizontal).

• Layout — Determine como os controles dentro do contêiner serão posicionados:

  • Horizontal/Vertical — a orientação dos controles.
  • Alinhamento — o alinhamento de controles dentro do contêiner.
  • Permitir encapsulamento — se selecionado, encapsula os controles no contêiner.

  • Permitir rolagem — se selecionado, permite a rolagem dentro do contêiner. Para habilitar o controle Permitir rolagem, o contêiner deve ter uma altura fixa (layout vertical) ou largura fixa (layout horizontal).

• Cor de fundo — a cor em segundo plano do contêiner.

• Borda — define a borda do controle. Espessura, cor e raio da borda podem ser configurados.

• Fonte — a família de fontes para o layout do contêiner. Todos os controles dentro do contêiner compartilham a mesma família de fontes. Por padrão, o controle herda a família de fontes do contêiner pai imediato, que é indicado pela palavra-chave “herdado”.

• Margem — define a margem do layout. Por padrão, uma margem de 0px é definida. As propriedades de margem Top/Bottom (Superior/Inferior) e Left/Right (Esquerda/Direita) são combinadas. Essas propriedades podem ser desanexadas usando o botão Link no lado direito da seção Margem.

• Preenchimento — o preenchimento do layout. Por padrão, é definido um preenchimento de 0px. As propriedades de margem Top/Bottom (Superior/Inferior) e Left/Right (Esquerda/Direita) são combinadas. Essas propriedades podem ser desanexadas usando o botão Link no lado direito da seção Preenchimento.

• Tamanho — a largura e a altura do contêiner. Por padrão, Largura e Altura são definidas como auto. Para definir valores personalizados, desmarque a opção auto e, em seguida, insira os valores de sua escolha e a unidade de medida (px, %, em).
  Para preencher o espaço disponível restante, selecione a opção fill no menu suspenso. A opção de preenchimento está disponível:

  • para Altura, quando o layout do controle estiver definido como Vertical

  • para Largura, quando o layout do controle estiver definido como Horizontal

  Para definir os tamanhos mínimo e máximo, clique no ícone de três pontos para expandir os Tamanhos mínimo e máximo.

• Avançado — exibe as propriedades Flex do controle.

  • Base flexível - Define o tamanho original de um item flexível antes que o espaço extra seja distribuído ou retirado (px, %, em, auto).

  • crescimento Flex - Quando o espaço extra está disponível, esses valores determinam quanto um item flexível deve crescer em relação ao restante dos itens.

  • Redução Flex - Quando o espaço não é suficiente, esse valor determina o quanto um item flexível deve encolher em comparação com os outros itens.

    Para obter detalhes, consulte a documentação do Mozilla Developer Network.

Importante: se o tamanho do contêiner tiver valores fixos e se os controles dentro dele ocuparem mais espaço do que o valor fixo, então Justificar — Meio, Justificar — Inferior não se aplicam a uma orientação vertical, e Justificar — Centro, Justificar — Direita não se aplicam a uma orientação horizontal.