Skip to main content

UI part. Creating the page

On this page, we will be using the following widgets:

    • function widget. (It should automatically appear on a new page.) 
    • grid layout widget:
        • row container widget:
            • list collaps widget( у налаштуваннях вимикаємо show pagination, налаштовуємо  collaps height  та item spacing) :
                • 4 container widgets(додаємо їм стилі):
                    • 6 text widgets;
                    • image widget;
                • button widget;

    Here is the layout of the page:

    image.png

    Let's create 2 APIs:

    1. /getCollections

    Receiving data about collections using the previously created endpoint.
    image.png

    2. /getAllGalleryData

    image.png


    Style the row container and list collaps in the same way as on the previous page.

    Inside the list collaps, we add separate containers to visually distinguish different blocks. We apply styles to these containers.

    image.png

    Inside the imageContainer , we place the image widget. Inside the other containers, we add two text widgets.

    image.png

    Inside the other containers, set the color to #666666.

    The button should be displayed without a container.

    To display the collection name, you need to:

    image.png

    {{getCollections.data.find(e => e._id === currentItem.collection).name}}