3
votes

Comment créer des v-tabs-items et v-tab-item remplir la hauteur

Je suis l'exemple: 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>

Cependant, je veux que la v-card prenne le reste de la hauteur. Comment puis-je y parvenir?

css vue.js vuetify.js

3 commentaires

Votre codepen est vide, veuillez le mettre à jour.

Désolé mon mauvais. En gros, l'exemple est ici: vuetifyjs.com/en/components/tabs#content

Je ne sais pas si cela répond à la question, mais pour que les éléments d'onglet remplissent toute la hauteur restante, vous pourriez être intéressé par cette approche stackoverflow.com/a / 61855170/5598194

3 Réponses :

3
votes

J'ai rencontré ce problème aujourd'hui. Une solution possible qui a fonctionné pour moi était de comprendre la hiérarchie des classes générées par vuetify, en utilisant l'inspecteur, puis de pirater le css pour ces classes spécifiques. Ceci était basé sur la recommandation dans cette réponse SO qui suggère de modifier la hauteur de .v-tabs__content code>. Malheureusement, cette classe ne semble plus exister et à la place (dans l'exemple que vous avez publié) la hiérarchie générée est quelque chose du genre

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

  Donc, il est nécessaire de modifier la hauteur css de  v-window ,  v-window__container  et  v-window-item  pour vous assurer que le conteneur de contenu de l'onglet s'étire à la taille de son parent comme vous le souhaitez. Enfin, nous devons changer la hauteur du contenu interne, dans ce cas la v-card .
  Dans mon code, j'ai fini par définir également  display: flex  pour le wrapper du conteneur, et  flex  uniquement pour la  .v-window . L'utilisation de flex garantit que tout s'aligne correctement sous la barre d'outils et assure enfin la bonne hauteur étirée pour le contenu de l'onglet. 
  Voici un codepen avec ma solution  https://codepen.io/anon/pen/wNEOdy , adapté pour l'exemple que vous avez publié. 
  HTML: 
  XXX   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: 
 <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>

0 commentaires

4
votes

L'approche donnée par amatyjajo ci-dessus fonctionne bien, mais si vous travaillez avec des composants à l'intérieur d'un bloc de style scoped , vous devrez utiliser un sélecteur profond pour obtenir aux conteneurs Windows imbriqués comme:

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

0 commentaires

1
votes

<style>
  .v-window__container {
    height: 100%
  }
</style>
did it for me

1 commentaires

Merci! J'ai dû ajouter! Important, pour ne pas être écrasé dans les sous-composants