WL_List_Preview_1280x720.mp4

00:00:00

Neste tutorial, vou discutir o widget de visualização de lista

00:00:04

A visualização da lista é uma maneira fácil de mostrar uma visualização de uma lista já existente

00:00:10

E é uma maneira fácil de organizar e formatar essa visualização

00:00:14

Então, para criar uma pré-visualização de lista, você terá que já ter criado um widget de lista para pré-visualizar

00:00:21

Você pode assistir ao tutorial da lista para ver como criar uma lista

00:00:26

Você pode ver aqui à direita, esta é a mesma lista que usamos no tutorial anterior

00:00:30

Então, se quisermos criar uma visualização para esta lista e mostrar apenas alguns itens e não a lista inteira, podemos simplesmente criar uma Visualização de Lista

00:00:38

Você deve ir em Adicionar um widget e ele está localizado ao lado da lista, basta criar uma visualização da lista

00:00:44

Vamos em frente e voltar e mover isso para o topo da lista para que ele carregue antes da lista

00:00:50

E então, quando você abri-lo, ele pedirá para você escolher qual widget deseja visualizar

00:00:59

Então você pode simplesmente ver o menu suspenso

00:01:00

Temos apenas uma lista, então você simplesmente escolheria esse widget

00:01:03

Se você tiver vários widgets, poderá escolher qual deseja visualizar

00:01:07

Depois de selecionar isso, você pode determinar o número de itens que são exibidos

00:01:10

Queremos apenas mostrar três itens

00:01:12

E você também pode determinar a ordem em que eles são exibidos, como a ordem da lista padrão e manual, que é determinada pela própria lista que você está visualizando.

00:01:21

Vai mostrar nessa ordem

00:01:23

Ou você pode mostrar do mais recente para o mais antigo ou do mais antigo para o mais recente, você sabe, organizá-lo por data se quiser fazer isso também e você pode organizá-lo de forma diferente do

00:01:33

lista atual

00:01:34

E o estilo do item é o que é visualizado e o que vemos na visualização, como se você quisesse ver apenas o título mais o resumo

00:01:40

Podemos ver que, depois de salvá-lo, ele nos mostrará três prévias ali, apenas o título e apenas o resumo, e também a data.

00:01:49

Mas se você quiser ver algo diferente, você pode fazer apenas o título e a imagem

00:01:54

Isso realmente mostrará as imagens para eles e, em seguida, a lista estará abaixo disso

00:02:01

Então você pode ver que pode determinar o que é visualizado

00:02:03

Você pode fazer apenas o título se quiser ocupar muito menos espaço e serão apenas esses três títulos

00:02:09

E então, se eles abrissem um, ele realmente mostraria todo o item da lista

00:02:15

Eles seriam capazes de rolar para cima e para baixo e como ele é aberto é determinado pela própria lista real

00:02:21

Se você quiser alterar isso e abrir em um modal ou em uma página separada, você terá que editar a lista real que está sendo visualizada

00:02:27

Mas para o widget de visualização da lista, é muito fácil de usar

00:02:32

Você simplesmente escolheria o widget que deseja visualizar, o número de itens exibidos na visualização, como ele é ordenado e o que deseja ver com o estilo do item, e você pode até organizá-lo.

00:02:44

as colunas em dispositivos móveis versus desktop, isso deve ser algo com o qual você provavelmente já está familiarizado, assim como as opções adicionais, muito fáceis de usar

00:02:51

Se você quiser ocultar isso no celular ou no desktop, você pode alternar qualquer um desses interruptores e pode alternar isso se quiser estar conectado para realmente ver a visualização e

00:03:02

os estilos adicionais são como todos os outros widgets

00:03:04

Se você quiser adicionar um fundo legal ou classes de widget personalizadas com algum CSS, você pode fazer isso aqui mesmo, é muito fácil adicionar fundos à visualização e você pode fazer isso separadamente do

00:03:16

lista real em si

00:03:17

Você pode ver que apenas adicionamos um fundo cinza simples e agradável à visualização

00:03:20

A pré-visualização é destacada com o fundo, a lista em si permanece a mesma e você pode determinar como a pré-visualização fica com essas configurações