如何制作v-tab項和v-tab項填充高度

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卡能夠承受其余的高度。 我該如何實現？

Answer 1

上面的amatyjajo給出的方法效果很好，但是，如果您正在使用scoped樣式塊內的組件，則需要使用深選擇器來訪問嵌套的Windows容器，例如：

.tab-items-row >>> .v-window__container,
.tab-items-row >>> .v-window-item {
  height: 100%;
}

Answer 2

我今天遇到了這個問題。 對我有用的一種可能的解決方案是使用檢查器找出由vuetify生成的類的層次結構，然后修改這些特定類的css。 這是基於此SO答案中的建議，該建議建議修改.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高度，以確保選項卡內容容器可以根據需要擴展到其父級的大小。 最后，我們需要更改內部內容的高度，在這種情況下為v-card 。

在我的代碼我最終也設置display:flex的容器包裝，並flex只為.v-window 。 使用flex可確保一切在工具欄下方正確對齊，並最終確保選項卡內容的正確拉伸高度。

這是一個帶有我的解決方案https://codepen.io/anon/pen/wNEOdy的codepen，適用於您發布的示例。

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.'
    }
  }
})

Answer 3

<style>
  .v-window__container {
    height: 100%
  }
</style>

為我做了