Vuetify 等高 v-tab-items [英] Vuetify equal height v-tab-items

问题描述

请告知如何使 vuetify v-tabs 内容以等高块显示.我在文档中没有找到可以帮助高度对齐的此组件的选项.

默认情况下 v-tab-item 的高度取决于它自己的内容高度:

布局示例:

<div id="app"><v-app id="inspire">
<v-tabs v-model="active" color="cyan" 深色滑块-color="yellow"><v-tab :key="tab-1">标签 1</v-tab><v-tab :key="tab-2">标签 2</v-tab><v-tab-item key="tab-1">标签 1 内容<br>标签 1 内容<br>标签 1 内容<br>标签 1 内容<br>标签 1 内容<br></v-tab-item><v-tab-item key="tab-2">标签 2 内容</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<v-tabs__content 类中的 href="https://stackoverflow.com/questions/2341821/height100-vs-min-height100">解释)值.

Codepen ...

new Vue({埃尔:'#app'})

.v-tabs__content {背景颜色:绿色；高度:100px；}

<div id="app"><v-app id="inspire">
<v-tabs v-model="active" color="cyan" 深色滑块-color="yellow"><v-tab :key="tab-1">标签 1</v-tab><v-tab :key="tab-2">标签 2</v-tab><v-tab-item key="tab-1">标签 1 内容<br>标签 1 内容<br>标签 1 内容<br>标签 1 内容<br>标签 1 内容<br></v-tab-item><v-tab-item key="tab-2">标签 2 内容</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>

Please advise how to make vuetify v-tabs content displayed in equal height blocks. I found no options for this component in documentation which can help with height alignment.

By default v-tab-item height depends on its own content height:

Layout example:

<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

Is it possible to align v-tab-items height by tallest v-tab-item using CSS only?

解决方案

If you haven't tried yet, then setting your desired height (not min-heightexplanation here) value in v-tabs__content class.

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！