Vuetify相等的高度v-tab-items

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vuetify相等的高度v-tab-items相关的知识,希望对你有一定的参考价值。

请告知如何使vuetify v-tabs内容以相同的高度块显示。我在文档中找不到这个组件的选项,这有助于高度对齐。

默认情况下,v-tab-item高度取决于其自己的内容高度: enter image description here enter image description here

布局示例:

<div id="app">
    <v-app id="inspire">
        <div>
            <v-tabs v-model="active" color="cyan" dark slider-color="yellow">
                <v-tab :key="tab-1">
                    tab 1

                </v-tab>
                <v-tab :key="tab-2">
                    tab 2

                </v-tab>
                <v-tab-item key="tab-1">
                    tab 1 content<br> tab 1 content<br> tab 1 content<br> tab 1 content<br> tab 1 content<br>
                </v-tab-item>
                <v-tab-item key="tab-2">
                    tab 2 content
                </v-tab-item>
            </v-tabs>

        </div>
    </v-app>
</div>

https://codepen.io/olegef/pen/MqKaxQ

是否可以使用CSS将v-tab-items高度与最高的v-tab-item对齐?

答案

如果你还没有尝试过,那么在height类中设置你想要的min-height(不是explanation herev-tabs__content)值。

Codepen ...

new Vue({
  el: '#app'
})
.v-tabs__content {
  background-color: green;
  height: 100px;
}
<div id="app">
  <v-app id="inspire">
    <div>
      <v-tabs v-model="active" color="cyan" dark slider-color="yellow">
        <v-tab :key="tab-1">
          tab 1

        </v-tab>
        <v-tab :key="tab-2">
          tab 2

        </v-tab>
        <v-tab-item key="tab-1">
          tab 1 content<br> tab 1 content<br> tab 1 content<br> tab 1 content<br> tab 1 content<br>
        </v-tab-item>
        <v-tab-item key="tab-2">
          tab 2 content
        </v-tab-item>
      </v-tabs>

    </div>
  </v-app>
</div>

<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>

以上是关于Vuetify相等的高度v-tab-items的主要内容,如果未能解决你的问题,请参考以下文章

Vuetify和require.js:如何显示动态组件?

Vuetify 容器不会填充高度

Vue / Vuetify:获取 v-flex 的尺寸

如何在 Vuetify 中更改文本字段的宽度和高度?

v-dialog vuetify vueJS 中的高度

Vuetify v-data-table - 如何使其填充可用高度?