Diseño de pantalla con grid de categorías (Diseño y función)

Pequeño tutorial para hacer una sección de categorias con scroll dentro de una pantalla. ¿Deseas hacer una pantalla como esta?:

Diseño:
Agrega un contenedor que tenga el 100% de ancho, de alto pueden ser los pixeles que tu consideres, yo recomiendo que sean más del 20% de tu pantalla principal.

Realiza el diseño de tu ficha (Que va a contener la categoría), el diseño puede ser como tu prefieras, lo único que debes respetar y es muy importante :eye: que el ancho no esté en % (porcentaje) si no en pixeles, como se muestra en la imagen. A lo alto sí puedes colocar en porcentaje.

:eye: No olvides colocar un nombre identificable tanto al texto de tu categoría como a la imagen.

Función:
Recuerda crear en tu base de datos la colección “Categorías”

*Sí quieres mostrar las categorías más importantes, o algúnas categorías que consideres a especie de resumen, es importante agregar el campo “Indice” como se muestra en la imagen y enlistarlas.

En el Onload de tu pantalla agrega la función > Get database data

En esta ocación quiero que se muestren las categorías filtradas por el índice que hicimos previamente y que muestre únicamente las primeras 4. (Esto es opcional)

Vas a seleccionar el botón azul (Open database browser) y vas a elegir tu colección “Categoría”, y vamos a salir de esta ventana.

En los callbacks > Data Obtained vas a agregar una función de Add collections to UI (Para crear la lista de categorías)

En tu Entry Vars > List data vas a agregar el PreviusOutputs > Get database data

Y activaremos el switch de Enable horizontal

Ahora tendrás que darle click al botón azul “Modify elements” > Elige el contenedor con la distribución que corresponde a categorias.

En List data vas a elegir el elemento “Imagen” > Control property > src > Y en la última opción (ListContext) vas a colocar el Atributo a sustituir (Igual que en tu base de datos), en este caso es Imagen

Lo mismo con el texto, eligiendo el Control property > text

Y listo, con esto tendrás un grid para tus categorías.

6 Me gusta

Excelente…!!! Gran aporte

1 me gusta

Veo que tienes un boton de VER MAS , como funciona ese apartado ?

Disculpa, ¿En qué parte?.

En el contenedor debajo de Menu , a un lado de categorias - > tienes [ Ver todas + ] como podria hacer eso , que me desplegara todas las categorías faltantes de la lista

Justo lo que buscaba, pero me da este error. He intentado poner las dimenciones del contenedor de la “grilla” en pixeles si éxito. Alguna idea? De hecho, quisiera hacer una grilla de varias lineas y columnas.


1 me gusta

Falta la segunda parte donde se selecciona la categoría y en la misma pagina se carga

que cuando presionas la categoría en la misma ventana se cargan los productos o negocios de esa categoría