vuetify 中的 v-tabs 没有占据 100% 的高度 [英] v-tabs in vuetify is not taking 100% height
问题描述
v-tabs
组件不会占据 100% 的高度.检查后,我可以看到所有选项卡项目(即选项卡内容)都被包裹在一个
你的内容
如何定位v-tab__items
类?还是有另一种方法可以实现相同的目标?我已经尝试了 Vuetify 的 height
API,但没有得到想要的结果.
感谢任何帮助:)
Context
我在这里发布了一个答案,因为我在搜索解决我自己的问题时发现了这个问题.就我而言,我希望标签内容占据所有高度.这听起来与您的问题相似,但由于该问题没有提供该问题的任何细节,我将做出一些假设.
解决方案
由于 v-tab__items
将具有其内容的高度,为具有所需高度的内容创建一个父元素,在我的情况下,我使用视口高度(请注意,由于选项卡也有自己的高度,因此内容必须考虑到这一点).我将它与
结合使用.请参见以下示例:
new Vue({el: '#app'})
.tab-item-wrapper {/* vuetify 将 v-tabs__container 高度设置为 48px */高度:计算(100vh - 48px)}
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.2.6/dist/vuetify.min.css" rel="样式表"/><link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|材料+图标" rel="stylesheet"/><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/vuetify@1.2.6/dist/vuetify.min.js"></script><div id="应用程序"><v-app><v-tabs><v-tab>tab</v-tab><v-tab-item><div class="tab-item-wrapper"><v-layout align-center justify-center column fill-height><v-btn color="success">成功</v-btn><v-btn color="error" 大纲>错误</v-btn></v-layout>
</v-tab-item></v-tabs></v-app>
注意:我找不到避免对 tab-height
进行硬编码的解决方案,目前这是 硬编码>https: it'a href="nota/github.com/vuetifyjs/vuetify/blob/464d8192f549b8bedac1a8eed47d2108b9fb0c3c/src/stylus/settings/_variables.styl" rel="nofollow noreferrer">变量.
EDIT 更新了 v-layout 的代码片段起始标记是自关闭的.
The v-tabs
component doesn't take 100% height. Upon inspecting, I could see that all the tab items (i.e. tab contents) are being wrapped inside a
<div class='v-tab__items'>
your content
</div>
How do target the v-tab__items
class? Or is there another way to achieve the same? I have tried the height
API from Vuetify, which did not yeild the desired result.
Any help is appreciated :)
Context
I'm posting an answer here since I found this question when searching to solve my own problem. In my case I wanted the tab content to occupy all the height. Which sounds similar to your problem, but since the question does not provide any specifics for the problem I will make some assumptions.
Solution
Since v-tab__items
will have the height of its content, create a parent element for the content that has the desired height, in my case I use the viewport height (note that, since the tabs also have its own height, the content must take that into account). I use this in conjunction with <v-layout align-center justify-center column fill-height/>
. See the following example:
new Vue({
el: '#app'
})
.tab-item-wrapper {
/* vuetify sets the v-tabs__container height to 48px */
height: calc(100vh - 48px)
}
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.2.6/dist/vuetify.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.2.6/dist/vuetify.min.js"></script>
<div id="app">
<v-app>
<v-tabs>
<v-tab>tab</v-tab>
<v-tab-item>
<div class="tab-item-wrapper">
<v-layout align-center justify-center column fill-height>
<v-btn color="success">Success</v-btn>
<v-btn color="error" outline>Error</v-btn>
</v-layout>
</div>
</v-tab-item>
</v-tabs>
</v-app>
</div>
Note: I could not find a solution to avoid hardcoding the tab-height
, by the time being this is hardcoded on Vuetify styles it's not exposed as a variable.
EDIT Updated snippet starting tag for v-layout was self closing.
这篇关于vuetify 中的 v-tabs 没有占据 100% 的高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!