css - 如何制作 v-tabs-items 和 v-tab-item 填充高度

Question

我在下面的例子中: https://vuetifyjs.com/en/components/tabs#content

<v-tabs-items v-model="model">
    <v-tab-item
      v-for="i in 3"
      :key="i"
      :value="`tab-${i}`"
    >
      <v-card flat>
        <v-card-text v-text="text"></v-card-text>
      </v-card>
    </v-tab-item>
  </v-tabs-items>

但是，我希望 v-card 占据剩余的高度。我怎样才能实现它？

Answer 1

我今天遇到了这个问题。一种对我有用的可能解决方案是使用检查器找出由 vuetify 生成的类的层次结构，然后破解这些特定类的 css。这是基于建议 in this SO answer这建议修改 .v-tabs__content 的高度。不幸的是，该类似乎不再存在，而是(在您发布的示例中)生成的层次结构类似于

<div>
<!-- Top level container of the tabbed interface -->
  <nav>
    <!-- Toolbar and tab header generated here -->
  </nav>
  <div class="v-window">
    <div class="v-window__container">
      <div class="v-window-item">
        <div class="v-card">
          <div class="v-card__text">Text.</div>
        </div>
      </div>
    </div>
  </div>
</div>

所以，需要修改v-window、v-window__container、v-window-item的css高度为确保选项卡内容容器根据需要拉伸(stretch)到其父级的大小。最后，我们需要更改内部内容的高度，在本例中为 v-card。

在我的代码中，我最终还为容器包装器设置了 display:flex，并且仅为 .v-window 设置了 flex。使用 flex 可确保一切都在工具栏下方正确对齐，并最终确保选项卡内容的正确拉伸(stretch)高度。

这是我的解决方案的代码笔 https://codepen.io/anon/pen/wNEOdy ，适用于您发布的示例。

HTML:

<div id="app">
  <v-app id="inspire">
    <div class="tab-wrapper">
      <v-toolbar
        color="cyan"
        dark
        tabs
      >
        <v-toolbar-side-icon></v-toolbar-side-icon>

        <v-toolbar-title>Page title</v-toolbar-title>

        <v-spacer></v-spacer>

        <v-btn icon>
          <v-icon>search</v-icon>
        </v-btn>

        <v-btn icon>
          <v-icon>more_vert</v-icon>
        </v-btn>

        <v-tabs
          slot="extension"
          v-model="model"
          centered
          color="cyan"
          slider-color="yellow"
        >
          <v-tab
            v-for="i in 3"
            :key="i"
            :href="`#tab-${i}`"
          >
            Item {{ i }}
          </v-tab>
        </v-tabs>
      </v-toolbar>

      <v-tabs-items v-model="model">
        <v-tab-item
          v-for="i in 3"
          :key="i"
          :value="`tab-${i}`"
        >
          <v-card flat>
            <v-card-text v-text="text"></v-card-text>
          </v-card>
        </v-tab-item>
      </v-tabs-items>
    </div>
  </v-app>
</div>

CSS:

.tab-wrapper {
  height:100%; /* Set to desired height of entire tabbed section, or use flex, or ... */
  display:flex; 
  flex-direction: column;
}

.tab-wrapper .v-window{
  flex: 1;
}

.tab-wrapper .v-window__container,
.tab-wrapper .v-window-item  {
  height: 100%;
}

/* customise the dimensions of the card content here */
.tab-wrapper .v-card {
  height: 100%;
}

JS:

new Vue({
  el: '#app',
  data () {
    return {
      model: 'tab-2',
      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
    }
  }
})