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屋！