Как заставить Vuetify v-flex занимать оставшееся пространство - PullRequest
Новая
       10

Как заставить Vuetify v-flex занимать оставшееся пространство

1 голос
/ 14 апреля 2020

У меня есть два сгибания внутри v-макета (fill-height). Проблема: Второй изгиб выравнивается по концу, что и ожидается, но первый изгиб не занимает оставшуюся часть доступного пространства. 

  <v-container>
      <v-layout row wrap fill-height>
        <v-flex
          xs12
          class="white--text green darken-3"
        >
            <v-card-text>I should occupy rest of the available space</v-card-text>
        </v-flex>
        <v-flex
          xs12
          align-self-end
          class="white--text blue darken-3"
        >   

        </v-flex>
      </v-layout>
    </v-container>

Codepen:

https://codepen.io/adatdeltax/pen/MWaapYR?editors=1000

Я новичок в vuetify, и выше codepen - это то, что я пробовал до сих пор, есть ли способ заставить flex1 занимать оставшуюся часть доступного пространства.

Ответы [ 2 ]

0 голосов
/ 14 апреля 2020

С Vuetify 1.5 :

Используйте column, а затем удалите xs12 проп. Тогда сжатие / увеличение будет работать должным образом ( без дополнительных CSS или встроенных стилей ): 

<div id="app">
  <v-app id="inspire">
    <v-container>
      <v-layout column fill-height>
        <v-flex
          grow
          class="white--text green darken-3"
        >
            <v-card-text>
              I should occupy rest of the available space
            </v-card-text>
        </v-flex>
        <v-flex
          shrink
          align-self-end
          class="white--text blue darken-3"
        >   
            <v-card-text>
              I should stay here
            </v-card-text>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

1,5 Демо: https://codeply.com/p/JjD6UZdtjU

С Vuetify 2.x :

Работает так же, за исключением того, что v-row, v-col используется вместо v-layout, v-flex: 

<div id="app">
    <v-app>
        <v-container class="fill-height">
            <v-row class="no-gutters flex-wrap flex-column fill-height">
                <v-col cols="auto" class="grow pink pa-2">
                    <h1>Content</h1>
                </v-col>
                <v-col cols="auto" class="shrink blue pa-2"> Footer </v-col>
            </v-row>
        </v-container>
    </v-app>
</div>

2.x Демонстрация: https://codeply.com/p/07CA4jZNAl

0 голосов
/ 14 апреля 2020

Мое решение: 

<v-layout column wrap fill-height>
  <v-flex
    style="flex:1"
    xs12
    class="white--text green darken-3"
  >
  </v-flex>
  <v-flex
    style="flex:0; width: 100%"
    xs12
    align-self-end
  >
    <v-card
      dark
      color="blue darken-1"
     >
      <v-card-text>I should stay here</v-card-text>
    </v-card>
  </v-flex>
</v-layout>
...