O Dynamic Repeater é um widget de design baseado em coleções que permite criar layouts repetitivos e estruturados de forma rápida e fácil, onde o design é o mesmo para cada item, mas o conteúdo é diferente; como listas de produtos, eventos ou serviços.
O conteúdo exibido no Repeater é gerenciado a partir de uma coleção interna. Para se familiarizar com as coleções internas e como elas funcionam, consulte Conteúdo Dinâmico: Coleções Internas.
Nota
Enquanto o Repetidor Dinâmico estiver em fase de testes, somente coleções internas e de imagens podem ser conectadas. No futuro, planejamos oferecer suporte ao Google Sheets, Airtable e bancos de dados externos.
O elemento que envolve o widget Repeater (também chamado de "frame") é o contêiner que contém os itens da coleção. Na imagem abaixo, estão ilustrados três itens da coleção.
Cada item da coleção exibe o conteúdo de uma linha da coleção interna conectada. Isso é possível conectando widget às colunas da coleção interna.
Por exemplo, em um site de adoção de cães, existe uma coleção interna com uma lista de cães disponíveis para adoção. Veja abaixo uma imagem da coleção.
Para exibir os cães no Repetidor Dinâmico, as colunas e widget são conectados da seguinte forma:
-
A coluna “Imagem” está conectada a um widget de Imagem.
-
A coluna “Nome do cachorro” está vinculada a um widget de Título Pequeno.
-
A coluna “Descrição do cão” está vinculada a um widget de texto.
Ao adicionar o Dynamic Repeater à tela, uma coleção interna de exemplo é criada e vinculada ao Dynamic Repeater. Você pode modificar esta coleção de exemplo ou criar uma nova coleção para vincular ao Repetidor Dinâmico.
Para adicionar um widget de repetidor dinâmico:
-
Na seção Elementos de Layout do painel widget , localize o Repetidor Dinâmico e arraste-o para a tela. Observe que, ao adicionar o Repeater à tela, uma coleção interna de exemplo é criada com 4 itens (linhas da coleção) que são exibidos no Dynamic Repeater. Isso serve para ajudar você a visualizar o design antes de adicionar seu próprio conteúdo.
-
Se desejar, você pode adicionar e remover widget do Repetidor Dinâmico para atender às suas necessidades. Não importa qual item da coleção você modifique, as alterações serão atualizadas automaticamente em todos os outros itens da coleção. Observe que o novo widget precisará ser conectado manualmente a uma coluna específica da coleção. Isso será concluído em uma etapa posterior.
Você pode modificar o design do elemento que envolve o Dynamic Repeater ou os itens da coleção dentro do Dynamic Repeater. Note que as alterações de design feitas em um item da coleção serão aplicadas a todos os outros. Isso permite economizar tempo, em vez de aplicar manualmente alterações de design a cada item individual da coleção e correr o risco de cometer erros.
Para modificar o design do contêiner, clique no widget Repetidor Dinâmico para abrir o menu flutuante e clique em Editar Design. Na seção Wrapper do painel de design, você pode configurar o seguinte:
-
Design da embalagem. Você pode definir a cor de fundo, o alinhamento, o tamanho, a animação, a posição (fixa ou ancorada) e o espaço entre os itens da coleção dentro do Repetidor Dinâmico.
Para saber mais sobre as seções do painel de design e como configurar cada opção de design, consulte Design com a tecnologia Flexbox.
Para saber mais sobre o que significa "fixo" ou "preso" em termos de posição widget , consulte Posiçãowidget : Fixo e Preso.
Para definir como os itens da coleção são exibidos no Repetidor Dinâmico, clique no widget Repetidor Dinâmico para abrir o menu flutuante e clique em Editar Design. Na seção Layout do painel de design, você pode configurar o seguinte:
-
Itens por linha. Selecione quantos itens da coleção deseja exibir por linha. Máximo de 10 itens por linha.
-
Os itens servem. Selecione Largura Fixa ou Ajuste Automático.
Para ativar a paginação ou a opção "Carregar mais", abra a seção Navegação do painel de design e ative a opção Ativar navegação . Após ativar a navegação, configure o seguinte:
-
Paginação ou Carregar mais. A paginação divide os itens da coleção em páginas pelas quais os visitantes do site podem navegar. A opção "Carregar mais" exibe uma quantidade definida de itens da coleção e, a cada clique, um conjunto adicional de itens é carregado.
-
Itens por página. Defina quantos itens da coleção devem ser exibidos por página ou antes que mais resultados sejam carregados.
Para fazer alterações de design no widget dentro de um item da coleção, clique no item da coleção individual para abrir o menu flutuante e clique em Editar design. Todas as alterações de design serão aplicadas a cada item no Repetidor. Na seção Layout do painel de design, você pode configurar o seguinte:
-
Alinhamento de conteúdo. Defina o alinhamento horizontal e vertical do conteúdo dentro do item da coleção.
-
Direção de empilhamento. Selecione se os widget dentro do Repeater serão empilhados horizontalmente ou verticalmente.
-
Envolvimento e alinhamento de linhas. Se desejar, você pode habilitar o widget para que cada item da coleção seja exibido em uma nova linha. Se você selecionar a opção de quebra de linha, também precisará definir o alinhamento da linha.
É importante observar que a largura ou a altura dos itens da coleção no Repetidor Dinâmico não podem ser alteradas. O item da coleção se ajusta para ocupar 100% do contêiner, o que significa que a altura e a largura do item da coleção são controladas pela altura e largura do contêiner do Dynamic Repeater. A altura e a largura do Repetidor Dinâmico podem ser definidas na seção Tamanho do painel de design.
Ao adicionar o Dynamic Repeater à tela, uma coleção interna de exemplo é criada e vinculada ao Dynamic Repeater e ao widget padrão dentro dele. Você pode modificar esta coleção de exemplo ou criar uma nova coleção interna para vincular ao Repetidor Dinâmico. Se você adicionar um novo widget ao Repetidor Dinâmico, ele precisará ser conectado a uma coluna de coleção.
Nota
Atualmente, o Repetidor Dinâmico só pode ser conectado a uma coleção interna ou de imagens. No futuro, planejamos dar suporte a todos os tipos de coleções.
Para conectar um repetidor dinâmico a uma coleção:
-
Clique no widget Repetidor Dinâmico para abrir o menu flutuante.
-
Clique no ícone de três pontos no menu flutuante e selecione Substituir Coleção.
-
Na janela modal, utilize o menu suspenso para selecionar a coleção desejada.
-
Clique em Substituir.
-
Em seguida, você precisa conectar widget às colunas da coleção. Clique em um widget no Repetidor Dinâmico para abrir o menu flutuante, depois clique no ícone de três pontos e selecione Conectar aos Dados.
-
Na janela modal, use o menu suspenso para selecionar a coluna da coleção que será conectada ao widget. Observe que somente as colunas compatíveis serão exibidas. Por exemplo, widget Imagem só pode ser conectado a uma coluna da coleção que tenha o tipo de campo "Imagem" . Clique em Conectar. Repita o processo para cada widget no Repetidor Dinâmico.
Para adicionar um item de coleção ao Repetidor Dinâmico, você precisa adicionar uma nova linha à coleção. A linha precisa conter conteúdo para ser exibida no Repetidor Dinâmico.
Para remover um item de uma coleção, exclua a linha correspondente na coleção.
Para adicionar um widget, abra o painel widget e arraste e solte o widget desejado no Repetidor Dinâmico. O widget é adicionado automaticamente a todos os outros itens da coleção.
Quando estiver pronto para conectar o widget à coleção, clique no widget para abrir o menu flutuante. Clique no ícone de três pontos e selecione Conectar aos dados. Na janela pop-up, selecione a coluna à qual deseja conectar o widget. Observe que somente as colunas compatíveis serão exibidas, ou seja, widget de Imagem só pode ser conectado à coluna da coleção que tenha "Imagem" definido como o tipo de campo. Clique em Conectar.
Para alterar a conexão do widget, clique no widget para abrir o menu flutuante. Clique no ícone de três pontos e selecione Alterar conexão. Utilize o menu suspenso na janela pop-up para selecionar uma coluna de coleção diferente. Clique em Conectar.
Para editar o conteúdo de um item no Repetidor Dinâmico, clique no widget e faça as alterações desejadas. Como o Dynamic Repeater suporta edição em linha, suas alterações também serão atualizadas na coleção conectada.
Você também pode editar o conteúdo de um item da coleção diretamente da coleção.
Para aumentar ou diminuir o espaçamento entre os itens da coleção, clique no Repetidor Dinâmico para abrir o menu flutuante e clique em Editar Design. Na seção Espaçamento do painel de design, use a configuração Espaçamento entre elementos para definir o espaço entre os itens da coleção.