Todas as coleções
Viz Flowics
Configurações
Opções de layout em Dynamic Lists
Opções de layout em Dynamic Lists
Atualizado há mais de uma semana

Ao usar uma Dynamic Content List, você tem três opções de layout diferentes: Columns, Rows e Grid.

Columns & Rows

Gráficos de classificação apresentados como rows no primeiro exemplo e como columns no segundo exemplo

As columns e rows organizam os itens em uma determinada direção: as rows organizam os itens verticalmente (1) e as columns organizam os itens horizontalmente (2) .

Eles se ajustam ao número de itens da lista no espaço disponível, dividindo o espaço pelo número de itens. Se você deseja mostrar um número fixo de itens na tela, pode usar filtros de lista, como pagination ou limit.

Grid

Classificação em um layout de Grid 2x10

O layout de Grid distribui os elementos em duas dimensões. Ao contrário do que acontece quando se usa o layout Rows e Columns, o layout Grid possui um número fixo de espaços e divide o espaço disponível com base nos espaços, ignorando o número de itens da lista para distribuir o espaço.

No inspetor você encontrará as propriedades para configurar sua grid:

Os campos Rows e Columns são usados para definir o número de linhas e colunas na grid.

Gaps são os espaços vazios entre rows e columns. Eles são expressos como uma porcentagem em relação ao tamanho da Dynamic List. Por padrão, ambos são modificados juntos, mas você pode desvinculá-los clicando no ícone do link.

Direção é a direção de preenchimento do conteúdo: os itens em sua lista serão organizados horizontalmente se você escolher o ícone 'Z' e verticalmente se você escolher o ícone 'N invertido'.

Detalhes sobre quantidade de itens e grid fixa

É importante notar que o layout de grade representará apenas o número de elementos que caberão nos slots de grade definidos. Por exemplo, ao usar uma grade 3x3, os itens serão agrupados em 9 espaços, mesmo que o conteúdo conectado tenha 7 ou 10 itens. Observe que os itens que não se encaixam na grade serão perdidos, conforme detalhado na imagem abaixo:


Dica profissional: ao usar grids para exibir um número de itens maior do que os espaços disponíveis, adicione pagination à lista e defina-a com o mesmo número de espaços disponíveis. Dessa forma, você não perderá nenhum item da lista.

Respondeu à sua pergunta?