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>
Related
I have a Vuetify project. I'm using the template with a slot group.header, so far so good.
Now I want to use a <v-spacer> in this template. Its in a <v-sheet>.
When I use the <v-spacer></v-spacer> I expect the content on the same line. But it will be on the next line. How can I display the button after the spacing on the same line, user Vuetify's system?
codepen
https://codepen.io/h3ll/pen/VwWOxdJ?editors=1010
HTML
<v-data-table
:headers="headers"
:items="desserts"
item-key="name"
sort-by="name"
group-by="category"
class="elevation-1"
show-group-by
>
<template v-slot:group.header="{items, isOpen, toggle}">
<th #click="toggle" colspan="12" class="ma-0 pa-0">
<v-sheet>
<v-icon class="mr-3">{{ isOpen ? 'mdi-folder-open' : 'mdi-folder' }}</v-icon>
{{ items[0].category }}
<v-spacer></v-spacer>
<v-btn x-small>I WANT TO BE ON THE RIGHT SIDE</v-btn>
</v-sheet>
</th>
</template>
</v-data-table>
javascript
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
value: 'name',
groupable: false,
},
{ text: 'Category', value: 'category', align: 'right' },
{ text: 'Dairy', value: 'dairy', align: 'right' },
],
desserts: [
{
name: 'Frozen Yogurt',
category: 'Ice cream',
dairy: 'Yes',
},
{
name: 'Ice cream sandwich',
category: 'Ice cream',
dairy: 'Yes',
},
...
],
}
},
})
Update
I can fix it with normal css like
<template v-slot:group.header="{items, isOpen, toggle}">
<th colspan="12">
<v-sheet>
<div #click="toggle" style="display: inline; width: 100vw">
<v-icon class="mr-3">{{ isOpen ? 'mdi-folder-open' : 'mdi-folder' }}</v-icon>
{{ items[0].folder }}
</div>
<div style="display: inline; float: right;">
<v-icon #click="deleteItem(item)">mdi-dots-vertical</v-icon>
</div>
</v-sheet>
</th>
</template>
```
But I wondering why Vuetify v-spacer is not working
v-spacer is basically just a div with the style flex-grow: 1. So to get this to work the parent container of the v-spacer needs to have display: flex.
In your case you can add this to v-sheet:
<v-sheet class="d-flex">
<!-- content -->
</v-sheet>
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 am trying to pass a parameter to a function by looping through an the array items with v-for.
<template>
<v-app>
<v-app-bar app>
<v-app-bar-nav-icon #click="drawer = !drawer"></v-app-bar-nav-icon>
<v-spacer></v-spacer>
<h1 ref="y"></h1>
</v-app-bar>
<v-content>
<router-view />
<v-navigation-drawer v-model="drawer" class="x">
<v-list-item
v-for="item in items"
:key="item.unidade"
:to="item.link"
:#click="change(item.method)"
>{{item.unidade}}</v-list-item>
</v-navigation-drawer>
</v-content>
</v-app>
</template>
<script>
export default {
name: "App",
data: () => ({
items: [
{ unidade: "IPE", link: "/ipe", method: "IPE" },
{ unidade: "DCSI", link: "/dcsi", method: "DCSI" },
{ unidade: "RT", link: "/rt", method: "RT" }
],
drawer: false
}),
methods: {
change(val) {
console.log(val);
this.$refs.y.innerText = val;
}
}
};
</script>
<style lang="stylus" scoped>
.x {
position: absolute;
}
</style>
I want the parameter in items arrray to be passed to change(val) method giving each v-list-item a distinct event listener.
Then I want h1 with the ref="y" to change it's text based on the v-list-item I click. But so far I am getting the browser error of "Error in render: "TypeError: Cannot set property 'innerText' of undefined""
Instead of setting the innerText of the <h1> you could instead bind the innerText to a reactive variable. You could create a variable in data that could store the selected method and then bind that to the innerText using {{}} syntax. Doing it this way would be more inline with Vue best practices. Let me show you what I mean.
<template>
<v-app>
<v-app-bar app>
<v-app-bar-nav-icon #click="drawer = !drawer"></v-app-bar-nav-icon>
<v-spacer></v-spacer>
<h1 ref="y">{{ selectedMethod }}</h1>
</v-app-bar>
<v-content>
<router-view />
<v-navigation-drawer v-model="drawer" class="x">
<v-list-item
v-for="item in items"
:key="item.unidade"
:to="item.link"
:#click="change(item.method)"
>{{item.unidade}}</v-list-item>
</v-navigation-drawer>
</v-content>
</v-app>
</template>
<script>
export default {
name: "App",
data: () => ({
items: [
{ unidade: "IPE", link: "/ipe", method: "IPE" },
{ unidade: "DCSI", link: "/dcsi", method: "DCSI" },
{ unidade: "RT", link: "/rt", method: "RT" }
],
selectedMethod: '', // Initially blank
drawer: false
}),
methods: {
change(val) {
this.selectedMethod = val; // Update the value of selectedMethod
}
}
};
</script>
<style lang="stylus" scoped>
.x {
position: absolute;
}
</style>
Hope this helps!
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>
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.