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;
- 6 text widgets;
-
- button widget;
- 4 container widgets(додаємо їм стилі):
-
- list collaps widget( у налаштуваннях вимикаємо show pagination, налаштовуємо collaps height та item spacing) :
-
- row container widget:
-
Here is the layout of the page:
Let's create 2 APIs:
1. /getCollections
Receiving data about collections using the previously created endpoint.
2. /getAllGalleryData
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.
Inside the imageContainer , we place the image widget. Inside the other containers, we add two text widgets.
Inside the other containers, set the color to #666666.
To display the collection name, you need to:
{{getCollections.data.find(e => e._id === currentItem.collection).name}}
No Comments