Customizing active-class in Vuetify

How do I customize the appearance of my v-list-item-group when it is in the 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>

This is the desired result.

https://i.stack.imgur.com/rP44a.png

I have attempted to apply custom styles using CSS but nothing seems to work:

.v-list-group-active {
  color: green;
}
cssvue.jsvuejs2vuetify.js

Answer №1

option 1 - customized style

Typically, it's recommended to create a specific class for the list to avoid affecting other parts of the page with these styles. 

.red_list .v-list-item-group .v-list-item--active{
  background-color: red;
  color: white;
}

Sample code snippet:

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="82f4f7e7f6ebe4fbc2b0acb0acb0b2">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@mdi/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ff9990918bbfcbd187">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bfc9cadaff8d91c7">[email protected]</a>/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0b7d7e6e7f626d724b39253925393b">[email protected]</a>/dist/vuetify.min.js"></script>

option 2 - based on color property

An alternative approach to keep the code DRY (Don't Repeat Yourself). 

<v-list-item-group v-model="item" color="red">
...rest of the code

Assigns the specified color to the element - it can be a material color name (e.g., success or purple) or a CSS color code (#033 or rgba(255, 0, 0, 0.5)). For a list of predefined colors, refer to the official documentation.

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ddaba8b8a9b4bba49deff3eff3efed">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@mdi/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="81e7eeeff5c1b5aff9">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f6808393b6c4d88e">[email protected]</a>/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83f5f6e6f7eae5fac3b1adb1adb1b3">[email protected]</a>/dist/vuetify.min.js"></script>

Answer №2

Just implemented this on the v-list-item instead of the v-list-group

.v-list-item--active {
  background-color: red;
}

Surprisingly, it was successful.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Expand the div width to the specified measurement horizontally

Is there a way to horizontally collapse a div (container) to a specific width that I can adjust, effectively hiding its content? The collapse effect should move towards the left. <div id="container"> <button type="button" id="myButton"> ...

javascriptjquerycss

The DIV is only partially concealed by the box shadow

I'm having an issue with the Box Shadow css style I've applied. It seems to only cover a small portion at the top of the mainContent DIV, leaving the rest without any shadow. Can anyone help me figure out what I might be doing wrong? .mainConten ...

css

Modify route title and component if user is authenticated

I've successfully implemented a login feature in my Nativescript-Vue application that utilizes the RadSideDrawer component. My current challenge is to change the route from 'Login' to 'Logout', and I'm struggling to find a wa ...

javascriptvue.jsvuejs2nativescriptnativescript-vue

Adding Vue.js Components to Table Cells: A Step-by-Step Guide

I've been working on incorporating a component, specifically a dropdown list that fetches options from the database... export default { name: 'IngMenu', props:['ingredients'], data () { return { selected: '&ap ...

vue.jsvuejs2

Optimizing Vue.js performance - tracking the re-rendering of my components

Currently, I am in the process of developing a PWA using vue.js and one issue I encounter is the excessive re-rendering of components leading to slow performance at times. Initially, my plan was to insert some console.log statements within the mounted and ...

vue.js

Apply this class exclusively for mobile devices

Is there a way to add the class p-5 only for mobile devices? For desktop computers: <nav class="navbar navbar-expand-lg navbar-light bg-light" style="padding:0px 10px 0px 10px;"> For mobile devices: <nav class="navbar navbar-expand-lg navbar-l ...

htmlcss

When hovering over various div elements in HTML

I've been experimenting with some code lately, and I'm trying to change the text color of a menu element when hovering over it. I can alter the background color just fine, but for some reason, the text color remains unchanged. Can anyone offer a ...

javascripthtmlcss

Ways to make the Bootstrap form's fields align horizontally

I've exhausted all options, but I just can't seem to get the fields aligned horizontally. <form class="form-horizontal" role="form"> <div class="form-inline"> <div class="form-group"> <label for="acctName ...

htmlcsstwitter-bootstrap

The error message "VueRouter does not have a property named 'history'" is common in Vue with TypeScript

In my typescript vue application, I encountered an error within a component while trying to access a parameter passed into the route. Here is the relevant code snippet: properties = getModule(PropertiesModule, this.$store); mounted() { id = this.$router. ...

typescriptvue.jsvue-routereslinttypescript-typings

Why are the radio buttons not aligned with the text in the center?

Currently, I am in the process of building a form that includes radio buttons. However, I've encountered an issue where the text next to the radio buttons appears on a different level than the buttons themselves. How can I go about fixing this partic ...

javascripthtmlcss

Aligning a number in the center both vertically and horizontally within a div that is inside a table-cell

Is there a way to center a number both vertically and horizontally within a div that needs to be 60px in width and height, shaped like a circle, and placed in the center of a table-cell? I've managed to center the div within the table-cell but can&apo ...

htmlcss

Animate your menu on hover with jQuery!

I am experiencing an issue with centering the background image below a link. When using mouseleave, the image does not return exactly to the center of the list. Any assistance on how to resolve this would be greatly appreciated. Thank you! Here is the ref ...

jqueryhtmlcss

Select any menu option to return to the one-page layout and then scroll down to find the location

I'm wondering if there is a way to navigate back from an external page to a specific section on my one-page website with a fixed menu? On my one-pager website, I have a fixed menu that includes a "apply for a job" button. When clicked, it takes users ...

javascripthtmlcss

Resolving issues with CSS placement and resizing

I have been considering developing a UI toolkit that offers an intuitive and powerful way of setting the position and size of elements/widgets. Here are some examples of how it could be used (although they are not currently implemented): ui("Panel").size( ...

javascriptcssuser-interface

Uploading and fetching images in Laravel using Vue

I have a table named 'case' that includes an image column. I would like users to be able to upload an image when inserting data into the case table. On the home page, users should be able to view cases along with the images associated with each c ...

phplaravelimagevue.js

Creating a cutoff with CSS: A step-by-step guide

Is there a way to create something similar using only CSS? https://i.stack.imgur.com/N9c6W.png I have no clue on how to achieve this. Any assistance would be greatly appreciated. ...

css

Modify the display of multiple divs within a main div

I am facing an issue with a parent div that contains multiple child divs. When there are many children, they all remain in a single row without adjusting into columns. Below is my current HTML: item1 item2 item3 ... <mat-card class="hove ...

htmlcssangularangular6position

Do I have to include the sizes attribute when using w-descriptors in srcset?

After reading several articles discussing the use of srcset for device-pixel-density adjustments and art direction, I have come to a few conclusions: The State of Responsive Images in 2015 by Paddi Macdonnell srcset Part 2: The W descriptor and sizes att ...

cssresponsive-designsrcsetresponsive-images

The post operation fails to include data in the table

I've been trying to add a user to my table, but nothing seems to be happening. Can someone help me figure out what I'm missing? .wrapper.d-flex.flex-column br input#fname(type='text', name='text' placeholder="name ...

vue.jsvuejs2axiospug

What is the process for configuring my form to automatically send to my email upon clicking the send button?

I found this code snippet on a website and I'm trying to figure out how to make the 'Send!' button redirect users to my email address with their message, name, and email included. Can anyone help me solve this issue? I attempted to add my e ...

javascripthtmlcss