WL_List_Preview_1280x720.mp4

00:00:00

En este tutorial, voy a hablar sobre el widget Vista previa de lista.

00:00:04

La vista previa de lista es una forma sencilla de mostrar una vista previa de una lista ya existente.

00:00:10

Y es una manera fácil de organizar y formatear esa vista previa.

00:00:14

Entonces, para crear una vista previa de la lista, deberá haber creado previamente un widget de Lista para obtener una vista previa.

00:00:21

Puedes ver el tutorial de Lista para ver cómo crear una lista.

00:00:26

Puedes ver a la derecha aquí que esta es la misma lista que usamos en el tutorial anterior.

00:00:30

Entonces, si quisiéramos crear una vista previa para esta lista y mostrar solo algunos elementos y no la lista completa, simplemente podemos crear una Vista previa de lista.

00:00:38

Irías a Agregar un widget y está ubicado justo al lado de la Lista, simplemente crea una Vista previa de la lista

00:00:44

Sigamos adelante y retrocedamos y movamos esto a la parte superior de la lista para que se cargue antes de la lista.

00:00:50

Y luego, una vez que lo abras, te pedirá que elijas qué widget quieres previsualizar.

00:00:59

Así que simplemente puedes ver el menú desplegable.

00:01:00

Solo tenemos una lista, por lo que simplemente elegirías ese widget.

00:01:03

Si tienes varios widgets, podrás elegir cuál quieres previsualizar

00:01:07

Una vez que seleccione eso, puede determinar la cantidad de elementos que se muestran.

00:01:10

Sólo queremos mostrar tres elementos.

00:01:12

Y también puedes determinar el orden en que se muestran, como el orden de lista predeterminado y manual que está determinado por la lista real que estás previsualizando.

00:01:21

Lo mostraremos en ese orden.

00:01:23

O puedes mostrar del más reciente al más antiguo o del más antiguo al más reciente, ya sabes, organizarlo por fecha si quieres hacer eso también y puedes organizarlo de manera diferente a la

00:01:33

lista actual

00:01:34

Y el estilo del elemento es lo que se previsualiza y lo que vemos en la vista previa, como si solo quisiera ver el título más el resumen.

00:01:40

Podemos ver que una vez que lo guardemos, nos mostrará tres vistas previas allí mismo, solo el título y solo el resumen y también tiene la fecha allí.

00:01:49

Pero si quieres ver algo diferente, puedes hacer solo el título y la imagen.

00:01:54

De hecho, eso les mostrará las imágenes y luego la lista está debajo de eso.

00:02:01

Para que puedas ver, puedes determinar qué se previsualiza.

00:02:03

Podrías poner solo el título si quieres ocupar mucho menos espacio y serán solo esos tres títulos.

00:02:09

Y luego, si abrieran uno, en realidad mostraría todo el elemento de la lista.

00:02:15

Podrían desplazarse hacia arriba y hacia abajo y la forma en que se abre está determinada por la lista en sí.

00:02:21

Si desea cambiar esto y abrirlo en un modal o en una página separada, deberá editar la lista real que se está previsualizando.

00:02:27

Pero el widget de vista previa de la lista es muy fácil de usar.

00:02:32

Simplemente elegirías el widget que quieres previsualizar, la cantidad de elementos que se muestran en la vista previa, cómo está ordenado y qué quieres ver con el estilo del elemento e incluso puedes organizarlo.

00:02:44

Las columnas sobre dispositivos móviles y computadoras de escritorio son algo con lo que probablemente ya estés familiarizado, así como las opciones adicionales, bastante fáciles de usar.

00:02:51

Si desea ocultar esto en dispositivos móviles o computadoras de escritorio, puede activar cualquiera de estos interruptores y puede activarlo si desea iniciar sesión para poder ver la vista previa y

00:03:02

Los estilos adicionales son como todos los demás widgets.

00:03:04

Si desea agregar un fondo agradable o clases de widgets personalizadas con algo de CSS, puede hacerlo aquí mismo, es muy fácil agregar fondos a la vista previa y puede hacerlo por separado de la

00:03:16

lista real en sí

00:03:17

Puedes ver que simplemente agregamos un lindo fondo gris simple a la vista previa.

00:03:20

La vista previa se resalta con el fondo, la lista real en sí sigue siendo la misma y puedes determinar cómo se ve la vista previa correctamente con estas configuraciones.