Vuetify:将组件固定在v-layout的顶部? [英] Vuetify: fixing component to top of v-layout?

问题描述

我正在尝试使用vuetify和nuxt构建网页.我正在尝试设置扩展面板ui组件的最大宽度属性( https://vuetifyjs.com/en/components/expansion-panels ).我有:

I'm trying to build a webpage with vuetify and nuxt. I'm trying to set the max-width property of the expansion panel ui component (https://vuetifyjs.com/en/components/expansion-panels). I have:

<template>
  <v-app id="inspire">
    <v-layout align-center justify-center row fill-height>
    <!-- <v-layout align-center > -->

    <v-expansion-panel style="maxWidth: 1200px" >   

      <v-expansion-panel-content v-for="(item,i) in items" :key="i">
        <div slot="header">{{item.header}}</div>
        <v-card >
          <v-card-text>{{item.text}}</v-card-text>
        </v-card>
      </v-expansion-panel-content>
    </v-expansion-panel>
    </v-layout>
  </v-app>
</template>

这使扩展面板居中，但我想将扩展面板推到v布局的顶部，以减少空间.现在有很大的差距.请参见屏幕截图.我如何做到这一点?

This is centering the expansion panel but I'd like to push the expansion panel up to the top of the v-layout so there is less space. Right now there is a big gap .Please see screenshot. How do I make this happen?

推荐答案

尝试从布局组件中删除以下道具:

Try to remove the following props from your layout component :

align-center justify-center

new Vue({
  el: '#app',

})

<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.css">
<div id="app" data-app>
  <v-app id="inspire">
    <v-layout row fill-height>
      <!-- <v-layout align-center > -->

      <v-expansion-panel style="max-width: 1200px">

        <v-expansion-panel-content v-for="item in 5" :key="item">
          <div slot="header">{{item}}</div>
          <v-card>
            <v-card-text>some content</v-card-text>
          </v-card>
        </v-expansion-panel-content>
      </v-expansion-panel>
    </v-layout>
  </v-app>
</div>

这篇关于Vuetify:将组件固定在v-layout的顶部?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！