Layout horizontal

Cria uma seção que contém visualizações organizadas horizontalmente, lado a lado. Quando a visualização é ligada a uma lista, a seção horizontal é repetida para cada item na lista, o que resulta em um formato semelhante a uma tabela.

O layout horizontal e o Layout vertical estão entre as visualizações mais comumente usadas para projetar uma interface com o usuário. Usadas em conjunto, as visualizações de layout Horizontal e Vertical fornecem a maioria dos recursos de layout de fluxo, que podem ser usados para projetar interfaces com o usuário complexas.

Dica: geralmente, as visualizações Layout horizontal e Layout vertical no kit de ferramentas da UI são usadas em conjunto com o Painel retrátil.

Propriedades de configuração

Em Configuração, configure ou modifique as propriedades de configuração para a visualização, como propriedades de aparência, responsivas e de desempenho.

Tamanho da tela: Uma propriedade de configuração que possui o ícone Tamanhos de Tela ao lado do nome da propriedade pode ter valores diferentes para cada tamanho de tela.. Se um valor não for configurado, o tamanho da tela herdará o valor do próximo maior tamanho de tela como seu valor padrão.

Definições de tema: As definições de tema especificam as cores e os estilos para uma visualização e determinam sua aparência. É possível visualizar a aparência de visualizações no editor de tema. Consulte Temas.

As propriedades de configuração de aparência para Layout Horizontal são mostradas na tabela a seguir:

Tabela 1. Propriedades de configuração de aparência para layout horizontal
Propriedade de configuração de aparência	Descrição	Tipo de dados
Fluxo de layout	O layout das visualizações: Horizontal Rolagem sequencial horizontal Horizontal exato Quebra automática horizontal Vertical Vertical exato	`String`
Alinhamento horizontal	O alinhamento horizontal das visualizações no layout: Justificado Esquerda Centro Direita Nota: Justificado não funciona bem em combinação com o fluxo de layout Rolagem sequencial horizontal e Quebra automática horizontal. Se usar essa combinação, você poderá ver resultados inesperados.	`String`
Alinhamento vertical	O alinhamento vertical das visualizações no layout. Essa propriedade se aplica somente a fluxos de layout horizontal. Parte Superior Ao Meio Parte inferior	`String`
Largura	Especifica a largura da visualização. É possível especificar a largura em `px` (pixels), `%` (percentual) ou `em` unidades.. Por exemplo, `50px`, `20%`ou `0.4em`.. Se nenhum tipo de unidade for especificado, então `px` será assumido.	`String`
Altura	Especifica a altura da visualização em unidades de `px` (pixels) ou `em` . Se nenhum tipo de unidade for especificado, então `px` será assumido.	`String`

As propriedades de configuração responsiva para o Layout Horizontal são listadas na tabela a seguir:

Tabela 2. Propriedades de configuração responsiva para layout horizontal
Propriedade de configuração responsiva	Descrição	Tipo de dados
Sensor responsivo	(Opcional) O identificador da visualização de sensor responsivo que contém esse layout. Se omitido, o sensor mais próximo no contêiner pai será usado.	`Boolean`
Comportamento	Especifica como a seção deve se comportar com base nos fatores de caixa que são definidos no sensor responsivo. Nome do fator de caixa: o nome do fator de caixa de sensor responsivo ao qual esses atributos se aplicam. Layout filho: o layout que pode ser usado com o fator de caixa especificado. Vertical Vertical exato Horizontal Rolagem sequencial horizontal Horizontal exato Quebra automática horizontal Alinhamento filho: o alinhamento que pode ser usado com o fator de caixa especificado: Justificado Esquerda Centro Direita Largura filha: as larguras de visualizações filhas que podem ser usadas com esse fator de caixa. Por exemplo, `60%`. Observe que é possível especificar mais larguras para as visualizações que estão incluídas no layout. Por exemplo, `80%`, `20%` Visibilidade: as configurações de visibilidade que podem ser usadas com o fator de caixa especificado. Visível Nenhum Oculto Largura: a largura da seção que pode ser usada com o fator de caixa especificado. Altura: a altura da seção que pode ser usada com o fator de caixa especificado. Estilo CSS: os estilos CSS que podem ser aplicados ao fator de caixa especificado. Classe CSS: as classes CSS que podem ser incluídas no fator de caixa especificado.	`ResponsiveBehavior[]`

Também é possível controlar a responsividade do conteúdo aninhando seu layout horizontal em uma visualização de Sensor responsivo

As propriedades de configuração de desempenho para o Layout Horizontal são listadas na tabela a seguir:

Tabela 3. Propriedades de configuração de desempenho para layout horizontal
Propriedade de configuração de desempenho	Descrição	Tipo de dados
Carregamento assíncrono	Melhora a experiência de UI para conjuntos de dados grandes à custa de um tempo de carregamento de linha geral mais lento quando a seção inicia o carregamento. Essa propriedade é usada somente quando a seção está ligada a uma lista.	`Boolean`
Tamanho do lote assíncrono	Especifica o número de linhas que são carregadas de forma síncrona em um lote assíncrono. Use essa propriedade para otimizar o desempenho de carregamento síncrono e assíncrono. Essa propriedade é usada somente quando a seção está ligada a uma lista.	`Integer`

Restrição: o rótulo para a visualização Layout horizontal não é mostrado, apesar da visibilidade da visualização ser configurada como Mostrar.. Para ser capaz de rotular sua visualização Layout horizontal, você pode desejar usá-la com uma visualização de painel.

Exemplo

No designer, inclua uma visualização de layout horizontal em sua página, que será usada como uma visualização de contêiner. Dentro do contêiner, coloque três visualizações Painel, que você pode nomear Work Categories, Claim Typee Elements. Defina as propriedades de configuração para cada visualização como a seguir.

Para Layout horizontal: sob Aparência, configure Fluxo de layout como Horizontal, Alinhamento horizontal para Justified, Alinhamento vertical para Tope Largura para 750px. Deixe Altura em branco.
Para Work Categories: em Aparência, configure Estilo de cor como Warninge Largura como 350px.
Para Claim Type: em Aparência, configure Estilo de cor como Successe Largura como 350px.
Para Elements: em Aparência, configure Estilo de cor como Dangere Largura como 350px.

No tempo de execução, o resultado mostra três painéis da mesma altura e largura e organizados lado a lado na seção horizontal: Work Categories é amarelo para Warning, Claim Type é verde para Successe Elements é vermelho para Danger.

Eventos

Configure ou modifique os manipuladores de eventos para a visualização nas propriedades Eventos. É possível configurar eventos para que sejam acionados programaticamente ou quando um usuário interage com a visualização. Para obter informações sobre como definir e codificar eventos, consulte Eventos definidos pelo usuário.

O layout horizontal tem os tipos de manipuladores de eventos a seguir:

On load: Ativado ao carregar a página. Por exemplo:
```
me.setWidth("100%");
```
On responsive update: ativado quando a seção é redimensionada de acordo com o tamanho da tela de um dispositivo.

Dependendo do evento específico, é possível usar a lógica do JavaScript para modificar os efeitos da visualização. Mais informações sobre o uso de eventos com visualizações estão localizadas no tópico Eventos definidos pelo usuário.

Métodos

Para os métodos que estão disponíveis para o Layout horizontal, consulte a API Layout horizontal JavaScript .

Recursos adicionais

Para obter informações sobre como criar um coach ou página, consulte Construindo coaches..
Para obter informações sobre propriedades padrão (Geral, Configuração, Posicionamento, Visibilidadee Atributos HTML), consulte Visualizar propriedades.