Как настроить гибкую сетку в Vue Материал - PullRequest
Новая
       43

Как настроить гибкую сетку в Vue Материал

0 голосов
/ 28 января 2020

Я пытаюсь создать интерфейс, который использует Vue -Материал для рендеринга пользовательских карт в сетке. карты отображаются правильно. Однако я хочу, чтобы моя сетка изгибала, выравнивала и шатала карты разных размеров таким образом, чтобы устранить пробелы, как показано ниже:

enter image description here

Следующий код соответствует вышеуказанной сетке: 

<template>
  <div class="content">
    <div class="md-layout">
      <div
        v-for="post in posts.slice().reverse()" :key="post.id"
        class="md-layout-item md-size-20 md-xsmall-size-100"
      >
        <md-card>
          <md-card-content v-if="post.downloadUrl">
            <md-card-media>
              <img :src="post.downloadUrl" style="width: 100%"/>
            </md-card-media><br>
            <p>{{ post.content }}</p>
            <p>{{ post.timestamp | moment }}</p>
          </md-card-content>

          <md-card-content v-else>
            <p>{{ post.content }}</p>
            <p>{{ post.timestamp | moment }}</p>
          </md-card-content>
          <md-card-actions>
            <md-button class="md-icon-button md-info">
              <md-icon>favorite</md-icon>
            </md-button>
            <md-button class="md-icon-button md-info">
              <md-icon>share</md-icon>
            </md-button>
          </md-card-actions>
        </md-card>
      </div>
    </div>
  </div>
</template>

Как я могу настроить этот Vue -Материальный макет, чтобы расположить карты таким образом, чтобы устранить эти пробелы? Спасибо!

enter image description here

Пример № 3

enter image description here

Ответы [ 3 ]

0 голосов
/ 28 января 2020

Вы можете использовать vue-masonry плагин. 

npm i vue-masonry

Посмотреть работает . Песочница здесь .

0 голосов
/ 28 января 2020

Спасибо всем, кто откликнулся сегодня. Однако мне нужен был такой плагин: https://www.npmjs.com/package/vue-masonry-css

Все, что мне нужно было сделать, это вставить контейнер v-for l oop и карточки внутри: 

<masonry
  :cols="3"
  :gutter="30"
  >
  <div v-for="(item, index) in items" :key="index">Item: {{index + 1}}</div>
</masonry>

Вот чего я пытался достичь:

enter image description here

0 голосов
/ 28 января 2020

Вы можете использовать сетка макет: 

Vue.use(VueMaterial.default)

new Vue({
  el: '#app'
})
.grid-container {
  display: grid;
  max-width: 100%;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(10px, auto);
  grid-gap: 1rem;
  padding: 1rem;
}
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1,minimal-ui" name="viewport">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons">
<link rel="stylesheet" href="https://unpkg.com/vue-material/dist/vue-material.min.css">
<link rel="stylesheet" href="https://unpkg.com/vue-material/dist/theme/default.css">

<body>
  <div id="app">
    <div class="grid-container">
      <md-card>
        <md-card-media>
          <img src="https://vuematerial.io/assets/examples/card-image-1.jpg" alt="People">
        </md-card-media>
        <md-card-header>
          <div class="md-title">Card without hover effect</div>
        </md-card-header>

        <md-card-content>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non.
        </md-card-content>

        <md-card-actions>
          <md-button>Action</md-button>
          <md-button>Action</md-button>
        </md-card-actions>
      </md-card>

      <md-card md-with-hover>
        <md-ripple>
          <md-card-header>
            <div class="md-title">Card with hover effect</div>
            <div class="md-subhead">It also have a ripple</div>
          </md-card-header>

          <md-card-content>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non.
          </md-card-content>

          <md-card-actions>
            <md-button>Action</md-button>
            <md-button>Action</md-button>
          </md-card-actions>
        </md-ripple>
      </md-card>
      <md-card>
        <md-card-header>
          <div class="md-title">Card without hover effect</div>
        </md-card-header>

        <md-card-content>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non.
        </md-card-content>

        <md-card-actions>
          <md-button>Action</md-button>
          <md-button>Action</md-button>
        </md-card-actions>
      </md-card>

      <md-card md-with-hover>
        <md-ripple>
          <md-card-header>
            <div class="md-title">Card with hover effect</div>
            <div class="md-subhead">It also have a ripple</div>
          </md-card-header>

          <md-card-content>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non.
          </md-card-content>

          <md-card-actions>
            <md-button>Action</md-button>
            <md-button>Action</md-button>
          </md-card-actions>
        </md-ripple>
      </md-card>
      <md-card>
        <md-card-header>
          <div class="md-title">Card without hover effect</div>
        </md-card-header>

        <md-card-content>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non.
        </md-card-content>

        <md-card-actions>
          <md-button>Action</md-button>
          <md-button>Action</md-button>
        </md-card-actions>
      </md-card>

      <md-card md-with-hover>
        <md-ripple>
          <md-card-header>
            <div class="md-title">Card with hover effect</div>
            <div class="md-subhead">It also have a ripple</div>
          </md-card-header>

          <md-card-content>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non.
          </md-card-content>

          <md-card-actions>
            <md-button>Action</md-button>
            <md-button>Action</md-button>
          </md-card-actions>
        </md-ripple>
      </md-card>
      <md-card>
        <md-card-header>
          <div class="md-title">Card without hover effect</div>
        </md-card-header>

        <md-card-content>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non.
        </md-card-content>

        <md-card-actions>
          <md-button>Action</md-button>
          <md-button>Action</md-button>
        </md-card-actions>
      </md-card>

      <md-card md-with-hover>
        <md-ripple>
          <md-card-header>
            <div class="md-title">Card with hover effect</div>
            <div class="md-subhead">It also have a ripple</div>
          </md-card-header>

          <md-card-content>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non.
          </md-card-content>

          <md-card-actions>
            <md-button>Action</md-button>
            <md-button>Action</md-button>
          </md-card-actions>
        </md-ripple>
      </md-card>
    </div>
    &copy Image linked from https://vuematerial.io/
  </div>

  <script src="https://unpkg.com/vue"></script>
  <script src="https://unpkg.com/vue-material"></script>

Подробнее о CSS сетка : https://developer.mozilla.org/en-US/docs/Web/CSS/grid

ДРУГОЙ РЕШЕНИЕ

Вы можете использовать

Решение Энди Босфута: https://medium.com/@andybarefoot / a-masonry-style-layout-using- css -grid-8c663d355ebb (Codepen: https://codepen.io/andybarefoot/pen/QMeZda),

или любой другой здесь: https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/

К сожалению, я не могу добавить его как фрагмент - содержание слишком длинный, поэтому мой ответ будет более 30000 символов.

...