GOOGLE ADS

воскресенье, 1 мая 2022 г.

Vuetify адаптивный макет сетки из списка элементов

У меня есть то, что кажется очень распространенной проблемой, но я могу справиться с этим.

У меня есть запрос API, который возвращает мне список объектов.

Я хочу отобразить свою страницу в виде сетки карт, заполненной контентом.

Я хочу, чтобы моя сетка была в 5 столбцах, а количество строк адаптировалось к количеству элементов в моем списке.

Я могу понять, как этого добиться.

Например: у меня есть запрос, возвращающий

items[
{"id":1,"title":"title1,"description":"description1"}
{"id":2,"title":"title2,"description":"description2"}
{"id":3,"title":"title3,"description":"description3"}
{"id":4,"title":"title4,"description":"description4"}
{"id":5,"title":"title5,"description":"description5"}
{"id":6,"title":"title6,"description":"description6"}
{"id":7,"title":"title7,"description":"description7"}
]

Моя сетка состоит из 7 элементов с систематическими 5 столбцами и адаптивными строками, такими как:

введите описание изображения здесь

И если мой запрос возвращает, например, 14 элементов, макет должен выглядеть следующим образом:

введите описание изображения здесь

Самое близкое, что я смог получить с кодом, было.

<v-container class="mt-2">
<h1>Top Rated views</h1>
<v-row v-for="n in gridDivider":key="n" class="n === 1? 'mb-6': ''">
<v-col v-for="(item,index) in Items":key="index">
<v-card class="mx-auto" max-width="300">
<v-img
class="white--text align-end"
height="200px"
src="item.avatar"
>
<v-card-title>anything as text</v-card-title>
</v-img>
<v-card-subtitle class="pb-0"> Number 10 </v-card-subtitle>
<v-card-text class="text--primary">
<div>Whitehaven Beach</div>
<div>Whitsunday Island, Whitsunday Islands</div>
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-container>

Спасибо за помощь


Решение проблемы

Это можно сделать, если вы измените v-rowи v-colобъявления таким образом:

<v-row class="five-cols">
<v-col v-for="(item,index) in Items":key="index">
...

и создайте класс CSS, five-colsиспользуя CSS Grid Layouts:

.five-cols {
display: grid;
grid-template-columns: repeat(5, 1fr);
}

Пример на CodePen

Комментариев нет:

Отправить комментарий

Laravel Datatable addColumn returns ID of one record only

Я пытаюсь использовать Yajra Datatable для интеграции DataTable на свой веб-сайт. Я смог отобразить таблицу, но столкнулся с проблемой. В по...