我想删除 Vuetify 扩展面板上的阴影。目前,它看起来像这样:
我的代码如下所示:
<v-layout wrap justify-space-between>
<v-flex xs12 pb-1>
<v-card>
<v-container pa-2>
<v-expansion-panel expand pa-0>
<v-expansion-panel-content>
<template v-slot:header>
<div>
{{ $t("var1") }}
</div>
</template>
<v-layout row wrap>
<v-flex xs12>
<v-text-field
class="right-input"
:label="$t('var2')"
value="600.00"
suffix="$"
disabled
flat
></v-text-field>
</v-flex>
</v-layout>
</v-expansion-panel-content>
</v-expansion-panel>
</v-container>
</v-card>
</v-flex>
</v-layout>
扩展面板上的阴影可以去掉吗?我尝试在 标签中添加“平”,但没有解决问题。我的目标是,在展开时,它看起来像一张平面卡片。谢谢! :)
在 Vuetify v.2 中,您可以在 v-expansion-panels 中使用属性
flat
。
记录在这里:https://vuetifyjs.com/en/api/v-expansion-panels/#flat
<v-expansion-panels flat>
<v-expansion-panel >
<v-expansion-panel-header>
header
</v-expansion-panel-header>
<v-expansion-panel-content>
Content
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
您可以在
elevation-0
上设置v-expansion-panel
课程。
这是工作示例:https://codepen.io/anon/pen/oKjRpm?editors=1010
我宁愿避免更改 CSS,因为它将删除所有页面上所有扩展面板上的所有边框和阴影。
使用 Veutify 2,以下 css 可以完成这项工作。
.v-expansion-panel::before {
box-shadow: none !important;
}
将这行代码放入 CSS 中:
.v-expansion-panel {
box-shadow: none;
}
您应该覆盖 v-expansion-panel 的 CSS 类:
.v-expansion-panel__shadow {
box-shadow: none !important;
}