css 如何设置Vuetify 2扩展面板的高度

zz2j4svz  于 2023-02-26  发布在  其他
关注(0)|答案(3)|浏览(204)

如何将Vuetify v2中扩展面板的高度设置为0(删除框形阴影)?

1bqhqjot

1bqhqjot1#

因此Vuetify v2提升助手类不能在扩展面板上工作。
最后,我不得不将以下CSS添加到组件中,以从扩展面板中删除box-shadow/elevation:

.v-expansion-panel::before {
  box-shadow: none;
}

希望这能帮上忙。

ccrfmcuu

ccrfmcuu2#

您可能需要添加flat属性,而不是更改高程,此属性将删除展开面板的高程和边框
您可以在v-expansion-panel API(Vuetify 2.4版)中了解更多关于扩展面板的内容
此外,如果仍需要展开面板之间的线,可以添加图元:<v-divider class="m-0"></v-divider>在每个面板之间单击带有< >图标的view source选项卡,查看文档中有关扩展面板结构的详细信息

z6psavjg

z6psavjg3#

对于<v-expansion-panel>,可以将elevation属性设置为“0
https://vuetifyjs.com/en/api/v-expansion-panel/#props-elevation

<v-expansion-panels>
    <v-expansion-panel elevation="0" v-for="i in 3" :key="i" title="Item"
        text="Lorem ipsum dolor sit amet"></v-expansion-panel>
</v-expansion-panels>

相关问题