web-dev-qa-db-fra.com

Présentation de la grille Vuetify - Comment remplir la hauteur de l'élément dans la grille

J'essaie de créer une disposition de grille, mais j'ai des problèmes.

La mise en page que j'essaie de créer est jointe dans l'image ci-dessous. C'est plus facile à montrer qu'à expliquer.

  • Une disposition de carte de panneau latéral qui sera remplie d'une liste d'éléments. UNE
  • Panneau supérieur à 2 éléments.
  • Un grand panneau principal pour remplir l'espace restant en dessous.

Current Layout

En utilisant le système de disposition de la grille vuetify, j'ai essayé de l'obtenir, mais je n'arrive pas à le remplir correctement. Mon code est ci-dessous.

Existe-t-il un bon moyen de créer cette disposition de grille?

<v-container fluid grid-list-md box>
  <v-layout row>

    <v-flex d-flex xs3>
      <v-layout row wrap>
        <v-card color="orange lighten-2" tile flat>
          <v-card-text>{{ lorem.slice(0, 90) }}</v-card-text>
        </v-card>

        <v-divider></v-divider>

        <v-card color="orange lighten-2" tile flat>
          <v-card-text>{{ lorem.slice(0, 90) }}</v-card-text>
        </v-card>

        <v-divider></v-divider>

        <v-card color="orange lighten-2" tile flat>
          <v-card-text>{{ lorem.slice(0, 90) }}</v-card-text>
        </v-card>

        <v-divider></v-divider>

        <v-card color="orange lighten-2" tile flat>
          <v-card-text>{{ lorem.slice(0, 90) }}</v-card-text>
        </v-card>
      </v-layout>

    </v-flex>

    <v-flex d-flex xs9>

      <v-layout row wrap>
        <v-layout row>
          <v-flex d-flex>
            <v-card color="blue-grey" dark tile flat>
              <v-card-text>{{ lorem }}</v-card-text>
            </v-card>
          </v-flex>

          <v-flex d-flex>
            <v-card color="blue-grey" dark tile flat>
              <v-card-text>{{ lorem }}</v-card-text>
            </v-card>
          </v-flex>
        </v-layout>

        <v-layout row>
          <v-flex d-flex xs9>
            <v-card color="blue-grey" dark tile flat>
              <v-card-text>{{ lorem }}</v-card-text> 
            </v-card>
          </v-flex>
        </v-layout>
      </v-layout>

    </v-flex>
  </v-layout>
</v-container>
vue.jsflexboxgrid-layoutvuetify.js
7
Cathal Cronin

Vous pouvez obtenir ce format en utilisant l'accessoire de hauteur de remplissage et les points d'arrêt. Ayant <v-layout row wrap> forcera la plus grande boîte avec xs12 pour occuper l'intégralité de la ligne suivante, vous n'avez donc pas à créer sa propre mise en page.

    <v-layout row wrap>
        <v-flex d-flex xs6>
          <v-card color="blue-grey" dark tile flat>
            <v-card-text>{{ lorem }}</v-card-text>
          </v-card>
        </v-flex>

        <v-flex d-flex xs6>
          <v-card color="blue-grey" dark tile flat>
            <v-card-text>{{ lorem + lorem }}</v-card-text>
          </v-card>
        </v-flex>

        <v-flex fill-height d-flex xs12>
         <v-card color="blue-grey" dark tile flat>
           <v-card-text>{{ lorem + lorem + lorem}}</v-card-text>
         </v-card>
        </v-flex>
    </v-layout>

Voici un codepen qui le montre en action.

5
jordanw