Come impostare l’altezza di vuetify scheda

Sto tentando di aggiungere una scheda con vue e vuetify, che avrà spazio nel mio contenitore con v-flex per creare un orizzontale di carta che si comporta allo stesso modo verticale. Ho tentato di aggiungere un altezza stile del 100%, utilizzando il riempimento ad altezza di bambino-flex, ecc, ma non riesco a ottenere le dimensioni della carta per riempire il contenitore. Qual è il modo corretto per regolare l’altezza?

rif: https://vuetifyjs.com/en/components/cards

<div id="app">
  <v-app id="inspire">
    <v-toolbar color="green" dark fixed app>
      <v-toolbar-title>My Application</v-toolbar-title>
    </v-toolbar>
    <v-content >
      <v-container fluid fill-height >
        <v-layout
          justify-center
          align-center 
        >
          <v-flex text-xs-center >
              <v-card class="elevation-20" >
              <v-toolbar dark color="primary">
                <v-toolbar-title>I want this to take up the whole space with slight padding</v-toolbar-title>
                <v-spacer></v-spacer>
              </v-toolbar>
              <v-card-text>

              </v-card-text>

            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </v-content>
    <v-footer color="green" app inset>
      <span class="white--text">&copy; 2018</span>
    </v-footer>
  </v-app>
</div>

esempio: https://codepen.io/anon/pen/LmVJKx

  • come questo codepen?
  • Questo è un po ‘ in ritardo, commento, ma ho avuto un problema simile in cui avevo bisogno di aggiungere overflow:hidden per carta e carta-testo
InformationsquelleAutor Darwin | 2018-04-20

 

3 Replies
  1. 8

    Con Vuetify si può fare quasi tutto, ma leggere attentamente la documentazione.Per il tuo problema se si da un’occhiata alla sezione api si noterà che il prop altezza che farà il lavoro.

    Vuetify dice per altezza oggetti di scena: definire Manualmente l’altezza della scheda

    Così,nel v-card elemento di aggiungere altezza, come segue:

    <v-card height="100%">

    Vedere in azione

    • Accettando questo come si possa risolvere il mio problema. Tuttavia, @Sfinge sopra nei commenti era esattamente quello che stavo cercando.
    • Bene leggere attentamente la documentazione …. questo era davvero invisibile a me … non so ancora qui questo scritto …
    • se vai qui => vuetifyjs.com/en/components/cards#api e di ricerca per l’altezza prop vedrete che
  2. 2

    Non so se si potrebbe risolvere il tuo problema… Ma per il tuo caso si può vedere una soluzione al problema qui: https://codepen.io/carlos-henreis/pen/djaQKb

    <div id="app">
      <v-app id="inspire">
        <v-toolbar color="green" dark fixed app>
          <v-toolbar-title>My Application</v-toolbar-title>
        </v-toolbar>
        <v-content >
          <v-container fluid fill-height >
            <v-layout
              justify-center
              align-center 
            >
              <v-flex text-xs-center fill-height>
                  <v-card class="elevation-20" height='100%'>
                  <v-toolbar dark color="primary">
                    <v-toolbar-title>I want this to take up the whole space with slight padding</v-toolbar-title>
                    <v-spacer></v-spacer>
                  </v-toolbar>
                  <v-card-text>
    
                  </v-card-text>
    
                </v-card>
              </v-flex>
            </v-layout>
          </v-container>
        </v-content>
        <v-footer color="green" app inset>
          <span class="white--text">&copy; 2017</span>
        </v-footer>
      </v-app>
    </div>
  3. 0

    si può provare ad aggiungere altezza al 100% per ogni bambino-elemento del contenitore.

Lascia un commento