html - Vuetify 等高 v-tab-items
问题描述
请告知如何使 vuetify v-tabs 内容以等高块显示。我在文档中没有找到可以帮助高度对齐的此组件的选项。
默认情况下 v-tab-item 的高度取决于它自己的内容高度:
布局示例:
<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
解释)值v-tabs__content
。
密码笔...
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>
推荐阅读
- python-3.x - 无法从我的 python 代码的输出中删除最后一个 +
- excel - 将句子中的特定单词加粗,但不突出显示“,Lead Bookrunner”之前的整个句子
- r - 使用 R 将日期序列添加到数据框中
- alert - 当尤里卡客户端健康状况下降时,我可以收到警报吗?
- amazon-web-services - 为什么我的 Lambda 函数在从 CodePipeline 调用时收不到事件数据?
- python - 如何删除 Tkinter 菜单小部件(Python 3)中烦人的默认边框?
- swift - Swift Set Fix Alignment 在任何 iphone 尺寸上
- c# - 来自 c# 的 AutoCAD 运行命令
- npm - npm-live-server https 命令行配置?
- sql-server - 无效的参考格式:在 MAC 上运行 Docker 以在容器中包含 SQL Server 2019