时间戳

首页 > 解决方案 > Vuetify 2.0：如何从 Vuetify 1.5 实现这种布局？

vue.js - Vuetify 2.0：如何从 Vuetify 1.5 实现这种布局？

问题描述

你好！

我最近开始使用 Vuetify 2.0，我发现自己被困在了我在 Vuetify 1.5 上能够轻松实现的事情上。我觉得我错过了一些非常明显的东西。

请帮助我从这个 Vuetify 1.5 模板中获得这个结果：

<div id="app">
  <v-app>
    <v-content>
      <v-container fluid fill-height class="grey darken-4">
        <v-layout fill-height column wrap>
          <v-flex>
            <v-card height="100%">
              <v-card-title>I fill the whole available vertical space.</v-card-title>
            </v-card>
          </v-flex>
          <v-flex shrink>
            <v-card>
              <v-card-title>I'm shrinked to content vertically.</v-card-title>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</div>

https://codepen.io/uatar/pen/rNaxoVV

标签： vue.jsvuetify.js

解决方案

  • column不再特定于网格，它现在是一个通用flex-column类
  • shrink应该替换为flex-grow-0阻止元素增长但不允许它缩小到其原始大小以下

除此之外，一切都非常相似：

<v-container fluid class="fill-height grey darken-4">
  <v-row dense class="fill-height flex-column">
    <v-col>
      <v-card height="100%">
        <v-card-title>I fill the whole available vertical space.</v-card-title>
      </v-card>
    </v-col>
    <v-col class="flex-grow-0">
      <v-card>
        <v-card-title>I'm shrinked to content vertically.</v-card-title>
      </v-card>
    </v-col>
  </v-row>
</v-container>

https://codepen.io/kaelwd/pen/abzdMWe?editors=1000

推荐阅读