代码之家 › 专栏 › 技术社区 › user1592380

Vuetify:将组件固定到V布局的顶部?

vuetify.js vue.js css

user1592380 · 技术社区 · 7 年前

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

<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布局的顶部,这样空间就更少了。现在有一个很大的差距。请看截图。我怎样才能做到这一点?

1 回复 | 直到 7 年前

Boussadjra Brahim 7 年前

尝试从布局组件中删除以下属性:

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

推荐文章

Tyssen · Vue3组件中没有可用的道具

1 年前

Felix · 更改vuetify v-field标签字体大小

1 年前

Qiuzman · 如何确保v-combobox中的所有项目都遵循规则

1 年前

Iliya · @更新:Vuetify3中的分页?

2 年前

leojail · 如何在保持最右侧列对齐的同时,将项目包装在div中来对齐项目?

2 年前

Myriad · VueJS CSS动画未扩展到v-card/v-col之外

2 年前

tsiPlus · 从v-autocomplete vuetify组件中清除选择

2 年前

Developer · Vuetify快速失败不会阻止发送表单

2 年前

ekjcfn3902039 · Vuetify/Vue3插槽在模板之间隐藏

2 年前

KorbenDose · Vue Transition无法使用v-autocomplete

2 年前