how can I style my v-list-item-group if its in active-state?
<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>
I want something like this.
I already tried to style it in css but it doesn't change anything:
.v-list-group-active {
color: green;
}
option 1 - custom class
In general, it's better to add a class for the list (Otherwise these styles affect the entire page/site v-lists).
.red_list .v-list-item-group .v-list-item--active{
background-color: red;
color: white;
}
Snippet example:
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>
option 2 - by color prop
More DRY approach.
<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>
So I just did this on v-list-item and not on v-list-group
.v-list-item--active {
background-color: red;
}
and it works.
Related
As an user, I want to see tasks checkbox as gray tick on hover and blue tick when checkbox is checked.
<div id="app">
<v-app id="inspire">
<v-container
class="px-0"
fluid
>
<v-checkbox
:off-icon="'mdi-circle-outline'"
:on-icon="'mdi-check-circle'"
v-model="checkbox"
:label="`Checkbox 1: ${checkbox.toString()}`"
></v-checkbox>
</v-container>
</v-app>
</div>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
checkbox: true,
}
},
})
https://codepen.io/edlung/pen/WNdmKBL?editors=101
As already mentioned in comments, you can use v-hover component to achieve it:
<v-hover
v-slot="{ hover }"
>
<v-checkbox
:off-icon="'mdi-circle-outline'"
:on-icon="'mdi-check-circle'"
v-model="checkbox"
:label="`Checkbox 1: ${checkbox.toString()}`"
:color="hover ? 'gray': 'primary'"
/>
</v-hover>
...
data () {
return {
checkbox: true,
}
}
CodePen demo is here
I want to put a status indicator in my v-expansion-panel-header:
v-expansion-panels
v-expansion-panel
v-expansion-panel-header Overview
v-expansion-panel-content
| ...
v-expansion-panel
v-expansion-panel-header(disable-icon-rotate)
v-icon(color="success") mdi-check
| Details
v-expansion-panel-content
However, for some reason the icon is taking up almost all the room in the header:
Is there a way to achieve this?
The Vuetify docs show an example with the check mark on the right hand side, by using v-slot:actions, but that had the same effect.
I note that there is a rule affecting the i of the icon:
.v-expansion-panel-header > :not(.v-expansion-panel-header__icon) {
flex: 1 1 auto;
}
Manually disabling that rule improves the situation:
Is there a way to do this properly?
Using Vuetify 2.5.8.
you can construct a grid layout inside v-expansion-panel-header using v-row and v-col to achieve any desired layout you want in the header.
check the demo below:
Vue.config.productionTip = false;
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: {
items: [{
id: 1,
header: 'one',
icon: null,
iconColor: null,
content: 'some text'
},
{
id: 2,
header: 'two',
icon: 'mdi-check',
iconColor: 'green',
content: 'some other text'
},
]
}
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-main>
<v-container>
<v-expansion-panels focusable>
<v-expansion-panel v-for="item in items" :key="item.id">
<v-expansion-panel-header>
<v-row>
<v-col v-if="item.icon" cols="1">
<v-icon :color="item.iconColor">{{ item.icon }}</v-icon>
</v-col>
<v-col cols="11">
{{ item.header }}
</v-col>
</v-row>
</v-expansion-panel-header>
<v-expansion-panel-content>
{{ item.content }}
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</v-container>
</v-main>
</v-app>
</div>
I have a component in Vue like this:
Tags.vue
<template>
<div>
<v-chip
v-for="tag in tags"
:key="tag"
class="ma-2"
label
x-small
color="blue"
text-color="white"
>
{{ tag }}
</v-chip>
</div>
</template>
<script>
export default {
name: 'Tags',
props: {
tags: {
type: Array,
default: () => ['Empty'],
},
},
}
</script>
This is the result
How can I make them appear one below the other instead of side by side?
This should be a css questions. Add a class "container" for the wrapper div and put some css into it. You can use flex-box
<div class="container">
<v-chip
v-for="tag in tags"
:key="tag"
class="ma-2"
label
x-small
color="blue"
text-color="white"
>
{{ tag }}
</v-chip>
</div>
<style lang="scss" scoped>
.container{
display: flex,
flex-direction: 'column'
}
</style>
This is another solution without css:
I use tag https://vuetifyjs.com/en/components/chip-groups/
<template>
<div class="container">
<v-chip-group column active-class="primary--text">
<v-chip
v-for="tag in tags"
:key="tag"
class="ma-2"
outlined
x-small
color="blue"
text-color="blue"
>
{{ tag }}
</v-chip>
</v-chip-group>
</div>
</template>
<script>
export default {
name: 'Tags',
props: {
tags: {
type: Array,
default: () => ['Empty'],
},
},
}
</script>
I have the following v-select
Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
el: '#app',
vuetify: new Vuetify(),
data(){
return{
company_roles:[{
value: 1,
text: 'CEO'
},
{
value: 2,
text: 'Project Manager'
},
]
}
}
})
.v-list-item__title:hover{
color: #ffd54f !important;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-row>
<v-col cols="12" sm="12" md="6">
<v-select :items="company_roles" label="Role in Company" solo color="yellow"></v-select>
</v-col>
</v-row>
</v-app>
</div>
I could change the hover color before select, but after it's selected, if you open the dropdown again the background and the color are blue, I don't know how to change those. I would like a solution using CSS, not SCSS, thanks.
You can modify css like:
.v-list .v-list-item--active {
background-color: green!important;
}
.v-list .v-list-item--active .v-list-item__title {
color: #ffd54f !important;
}
you can update the colors as per your requirement here. For demo, I have added background green and text color #ffd54f
Working Demo:
Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
el: '#app',
vuetify: new Vuetify(),
data(){
return{
company_roles:[{
value: 1,
text: 'CEO'
},
{
value: 2,
text: 'Project Manager'
},
]
}
}
})
.v-list-item__title:hover{
color: #ffd54f !important;
}
.v-list .v-list-item--active {
background-color: green!important;
}
.v-list .v-list-item--active .v-list-item__title {
color: #ffd54f !important;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-row>
<v-col cols="12" sm="12" md="6">
<v-select :items="company_roles" label="Role in Company" solo color="yellow"></v-select>
</v-col>
</v-row>
</v-app>
</div>
I'm new to vuetify.
I use Vuetify v-list sample (Github)
My v-list:
Code:
<template>
<v-card
max-width="500"
class="mx-auto"
>
<v-toolbar
color="pink"
dark
>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Inbox</v-toolbar-title>
</v-toolbar>
<v-list two-line>
<v-list-item-group
v-model="selected"
multiple
active-class="pink--text"
>
<template v-for="(item, index) in items">
<v-list-item :key="item.title">
<template v-slot:default="{ active, toggle }">
<v-list-item-content>
<v-list-item-title v-text="item.title"></v-list-item-title>
<v-list-item-subtitle class="text--primary" v-text="item.headline"></v-list-item-subtitle>
<v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action>
<v-list-item-action-text v-text="item.action"></v-list-item-action-text>
</v-list-item-action>
</template>
</v-list-item>
<v-divider
v-if="index + 1 < items.length"
:key="index"
></v-divider>
</template>
</v-list-item-group>
</v-list>
</v-card>
</template>
<script>
export default {
data: () => ({
selected: [2],
items: [
{
action: '15 min',
headline: 'Brunch this weekend?',
title: 'Ali Connors',
subtitle: "I'll be in your neighborhood doing errands this weekend. Do you want to hang out?",
},
{
action: '2 hr',
headline: 'Summer BBQ',
title: 'me, Scrott, Jennifer',
subtitle: "Wish I could come, but I'm out of town this weekend.",
},
{
action: '6 hr',
headline: 'Oui oui',
title: 'Sandra Adams',
subtitle: 'Do you have Paris recommendations? Have you ever been?',
},
{
action: '12 hr',
headline: 'Birthday gift',
title: 'Trevor Hansen',
subtitle: 'Have any ideas about what we should get Heidi for her birthday?',
},
{
action: '18hr',
headline: 'Recipe to try',
title: 'Britta Holt',
subtitle: 'We should eat this: Grate, Squash, Corn, and tomatillo Tacos.',
},
],
}),
}
</script>
I want when I hover on each v-list-item, A light white background with some shadow a button in it's center to be appeared. (I made this hover concept in Photoshop):
Should I use v-hover component? And what style should I use?
Thanks.
Use v-hover and v-overlay...
<v-list two-line>
<v-list-item-group v-model="selected" multiple active-class="pink--text">
<template v-for="(item, index) in items">
<v-hover v-slot:default="{ hover }">
<v-list-item :key="item.title">
<template v-slot:default="{ active, toggle }">
<v-expand-transition>
<v-overlay
absolute
:opacity=".2"
:value="hover"
>
<v-btn
color="white"
class="black--text"
>
Button
</v-btn>
</v-overlay>
</v-expand-transition>
<v-list-item-content>
<v-list-item-title v-text="item.title"></v-list-item-title>
<v-list-item-subtitle class="text--primary" v-text="item.headline"></v-list-item-subtitle>
<v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action>
<v-list-item-action-text v-text="item.action"></v-list-item-action-text>
</v-list-item-action>
</template>
</v-list-item>
</v-hover>
<v-divider v-if="index + 1 < items.length" :key="index"></v-divider>
</template>
</v-list-item-group>
</v-list>
Demo: https://codeply.com/p/16POCG8AKf