如何将Vuetify v2中扩展面板的高度设置为0(删除框形阴影)?
1bqhqjot1#
因此Vuetify v2提升助手类不能在扩展面板上工作。最后,我不得不将以下CSS添加到组件中,以从扩展面板中删除box-shadow/elevation:
.v-expansion-panel::before { box-shadow: none; }
希望这能帮上忙。
ccrfmcuu2#
您可能需要添加flat属性,而不是更改高程,此属性将删除展开面板的高程和边框您可以在v-expansion-panel API(Vuetify 2.4版)中了解更多关于扩展面板的内容此外,如果仍需要展开面板之间的线,可以添加图元:<v-divider class="m-0"></v-divider>在每个面板之间单击带有< >图标的view source选项卡,查看文档中有关扩展面板结构的详细信息
flat
<v-divider class="m-0"></v-divider>
< >
view source
z6psavjg3#
对于<v-expansion-panel>,可以将elevation属性设置为“0https://vuetifyjs.com/en/api/v-expansion-panel/#props-elevation
<v-expansion-panel>
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>
3条答案
按热度按时间1bqhqjot1#
因此Vuetify v2提升助手类不能在扩展面板上工作。
最后,我不得不将以下CSS添加到组件中,以从扩展面板中删除box-shadow/elevation:
希望这能帮上忙。
ccrfmcuu2#
您可能需要添加
flat
属性,而不是更改高程,此属性将删除展开面板的高程和边框您可以在v-expansion-panel API(Vuetify 2.4版)中了解更多关于扩展面板的内容
此外,如果仍需要展开面板之间的线,可以添加图元:
<v-divider class="m-0"></v-divider>
在每个面板之间单击带有< >
图标的view source
选项卡,查看文档中有关扩展面板结构的详细信息z6psavjg3#
对于
<v-expansion-panel>
,可以将elevation
属性设置为“0https://vuetifyjs.com/en/api/v-expansion-panel/#props-elevation