如果我的 v-list-item-group 处于事件状态,我该如何设置它的样式?
<v-list>
<v-list-item-group v-model="day" color="green">
<v-list-item v-for="(item, i) in items" :key="i">
<v-list-item-content>
<v-list-item-title v-text="item.day"></v-list-item-title>
<v-list-item-title v-text="item.title"></v-list-item-title>
<v-list-item-subtitle v-text="item.date"></v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-list-item-group>
</v-list>
我想要这样的东西。
我已经尝试在 css 中设置样式,但它没有任何改变:
.v-list-group-active {
color: green;
}
最佳答案
选项 1 - 自定义类
一般来说,最好为列表添加一个类(否则这些样式会影响整个页面/站点 v-lists)。
.red_list .v-list-item-group .v-list-item--active{
background-color: red;
color: white;
}
片段示例:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
item: 1,
items: [
{ text: 'Real-Time', icon: 'mdi-clock' },
{ text: 'Audience', icon: 'mdi-account' },
{ text: 'Conversions', icon: 'mdi-flag' },
],
}),
})
.red_list .v-list-item-group .v-list-item--active{
background-color: red;
color: white;
}
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.2.20/dist/vuetify.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet"/>
<div id="app">
<v-app id="inspire">
<v-card
class="mx-auto"
max-width="300"
tile
>
<v-list class="red_list">
<v-subheader>REPORTS</v-subheader>
<v-list-item-group v-model="item" color="primary">
<v-list-item
v-for="(item, i) in items"
:key="i"
>
<v-list-item-icon>
<v-icon v-text="item.icon"></v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title v-text="item.text"></v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-item-group>
</v-list>
</v-card>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.2.20/dist/vuetify.min.js"></script>
选项 2 - 通过 color
prop
更多 DRY 方法。
<v-list-item-group v-model="item" color="red">
...rest of the code
Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)). You can find list of built in classes on the colors page
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
items: [
{
icon: 'mdi-inbox',
text: 'Inbox',
},
{
icon: 'mdi-star',
text: 'Star',
},
{
icon: 'mdi-send',
text: 'Send',
},
{
icon: 'mdi-email-open',
text: 'Drafts',
},
],
model: 0,
}),
})
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.2.20/dist/vuetify.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet"/>
<div id="app">
<v-app id="inspire">
<v-card
class="mx-auto"
max-width="500"
>
<v-list>
<v-list-item-group v-model="model" color="red">
<v-list-item
v-for="(item, i) in items"
:key="i"
>
<v-list-item-icon>
<v-icon v-text="item.icon"></v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title v-text="item.text"></v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-item-group>
</v-list>
</v-card>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.2.20/dist/vuetify.min.js"></script>
关于css - 在 Vuetify 中设置事件类的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61039190/