Vuetify V-Card подходит как головоломка (макет масонства) - PullRequest
Новая
       15

Vuetify V-Card подходит как головоломка (макет масонства)

0 голосов
/ 29 марта 2020

У меня есть страница с 6 или более v-картами.

Есть ли способ разместить их как головоломку? Я хотел бы убрать пробел между маленькой v-картой в первой и второй строке.

Теперь выглядит так:

enter image description here

1 Ответ

2 голосов
/ 29 марта 2020

Нет способа (пока) решить эту проблему с помощью Vuetify API. Связанные Github Feature Треб:

[Запрос функции] Макет кладки # 4091

Решение от масонства. js

Использование Javascript плагин. Например, кладка. js.

кладка. js & vuetify grid - Фрагмент кода 

<!-- https://vuetifyjs.com/en/ -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-row class="masonry">
          <v-col class="child" cols="12" sm="6">
            <v-card class="pa-2" color="pink darken-1" dark>
              <v-card-title>Card 1</v-card-title>
              <v-card-text>
                The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections form, Rackham. One of three columns
                The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections form, Rackham.
                </v-card-text>
            </v-card>
          </v-col>
          <!-- card 2-->
          <v-col class="child" cols="12" sm="6">
            <v-card class="pa-2"  color="orange darken-3" dark>
              <v-card-title>Card 2</v-card-title>
              <v-card-text>
                One The standard chunk of Lorem Ipsum used since the 1500s is 
                </v-card-text>
            </v-card>
          </v-col>
          <!-- card 3 -->
          <v-col class="child" cols="12" sm="6">
            <v-card class="pa-2" color="#385F73" dark >
              <v-card-title>Card 3</v-card-title>
              <v-card-text>
                The chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections form, Rackham.
                </v-card-text>
            </v-card>
          </v-col>
          <!-- card 4 -->
          <v-col class="child" cols="12" sm="6">
            <v-card class="pa-2" color="blue darken-4" dark >
              <v-card-title>Card 4</v-card-title>
              <v-card-text>
                The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections form, Rackham.
                </v-card-text>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </v-content>
  </v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script src="https://unpkg.com/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"></script>

<script>
  new Vue({
    el: '#app',
    vuetify: new Vuetify(),
  })
</script>

<script>
  // element argument can be a selector string
  //   for an individual element
  var msnry = new Masonry( '.masonry', {
    // options
    itemSelector: "[class*='col-']",
  });
</script>

Как (Менее 1 минуты)

Шаг 1/3: CDN перед телом

<script src="https://unpkg.com/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"></script>

Шаг 2/3: Установить элемент контейнера

Кладка работает над элементом сетки контейнера с группой дочерних элементов.

Добавьте class (или id) к вашей сетке flexbox (установите как container element). masonry в этом примере (используйте любое имя). 

<v-row class="masonry">
  <v-col class="child" cols="12" sm="6">
   <v-card class="pa-2" outlined >
..rest of the code

Шаг 3/3: Инициализация с ванилью js

Для itemSelector используйте селектор подстановочного знака (Для соответствия любому vuetify col = чистый раствор) itemSelector: "[class*='col-']",

<script>
  // element argument can be a selector string
  //   for an individual element
  var msnry = new Masonry( '.masonry', {
    // options
    itemSelector: '.child',
  });
</script>

Документы:

Решение по индивидуальному заказу CSS

Еще один вариант - использовать flexbox / Grid и Custom CSS, на мой взгляд, это слишком много кода и идей для такой простой задачи. Статья по теме:

https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/

...