CODEWITHSUNDEEP
cssvue.jsvuejs2vuetify.js
user12056490
user12056490

Reputation:

Styling active-class in Vuetify

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.

image

I already tried to style it in css but it doesn't change anything:

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

Upvotes: 3

Views: 20311

Answers (2)

Ezra Siton
Ezra Siton

Reputation: 7741

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/[email protected]/dist/vuetify.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/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/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/vuetify.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/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/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>

Upvotes: 4

user12056490
user12056490

Reputation:

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.

Upvotes: 2

Related Questions