Vuetify grid layout - Как заполнить высоту элемента в сетке - PullRequest
Новая
       38

Vuetify grid layout - Как заполнить высоту элемента в сетке

0 голосов
/ 19 сентября 2018

Я пытаюсь создать сетку, но у меня проблемы.

Макет, который я пытаюсь создать, прикреплен на изображении ниже.Проще показать, чем объяснить.

  • Макет карты боковой панели, который будет заполнен списком предметов.A
  • 2 элемента верхней панели.
  • Большая главная панель для заполнения оставшегося пространства внизу.

Current Layout

Используя систему разметки сетки vuetify, я пытался ее получить, но не смог ее красиво заполнить.Мой код ниже.

Есть ли хороший способ создать эту сетку? 

<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>

1 Ответ

0 голосов
/ 19 сентября 2018

Вы можете достичь этого формата, используя реквизит высоты заполнения и точки останова.Наличие <v-layout row wrap> заставит большее поле с xs12 занять весь следующий ряд, поэтому вам не нужно создавать его собственный макет. 

    <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>

Вот кодовый код , который показывает это в действии.

...