web-dev-qa-db-ja.com

vuetifyのvタブが100％の高さにならない

v-tabsコンポーネントは100％の高さを取りません。調べたところ、すべてのタブ項目（つまり、タブの内容）が

<div class='v-tab__items'>  
  your content  
</div>

v-tab__itemsクラス？それとも同じことを達成する別の方法はありますか？私はVuetifyのheight AP​​Iを試しましたが、望んだ結果が得られませんでした。

どんな助けでもありがたいです:)

vue.jsvuejs2vuetify.js
6
pk10

環境

自分の問題を解決するために検索しているときにこの質問を見つけたので、ここに回答を投稿します。私の場合、タブのコンテンツがすべての高さを占めるようにしたいと思いました。これはあなたの問題に似ているように聞こえますが、質問は問題の詳細を提供しないので、私はいくつかの仮定を行います。

解決

v-tab__itemsにはコンテンツの高さがあるため、目的の高さを持つコンテンツの親要素を作成します。ビューポートの高さ（タブにも独自の高さがあるため、コンテンツではそれを考慮する必要があります）。これを<v-layout align-center justify-center column fill-height/>と組み合わせて使用​​します。次の例を参照してください。

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/[email protected]/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/[email protected]/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>

注：tab-heightのハードコーディングを回避するための解決策が見つからなかったため、現時点では Vuetifyスタイルにハードコードされています変数 として公開されていません。

3
a--m

2時間探していました。でも見つけた

.tabs__content
    {
        min-height: 100vh;
    }
0
TRT

これはVuetify 2で私にとってはうまくいきます。

.v-tabs-items.full-height-tab  .v-window-item {
  height: calc(100vh - 270px); /* Adjust 270px to suits your needs */
  overflow-y: auto;
}

<v-tabs-items class="full-height-tab">
    <v-tab-item>...</v-tab-item>
    <v-tab-item>...</v-tab-item>
</v-tabs-items>
0
hubert17