Highlight color for selected item of Expansion Item ?

Incremental

Hello, is it possible to have a highlight color for the selected item of an Expansion Item ?
https://quasar.dev/vue-components/expansion-item#QExpansionItem-API

dobbel

@Incremental

https://codepen.io/ontwikkelfabriek/pen/rNeRWxG

It’s called expanded not selected btw.

Incremental

Thanks dobbel, it’s not exactly what I’d like to have, because when all items are expanded, they are all orange.

I’d like to identify the selected item of the current page like in this template the green highlight in the menu :
https://quasar-admin-crm-template.netlify.app/dashboard

PS : btw, I’ve propably not understood everything, but the “expanded” property seems to be not documented ???

metalsadman

@Incremental it’s not a property, it’s a css class. You can do what you want, whichever items you use inside, if you use list items, then you take a look into qitem API, things like active-class, etc… expansion-item is just a wrapper of qitem, so most props are also present in it. You refer to that menu on crm-template, it’s open source so you can go take a look how was that implemented if you check out the source in its GitHub repo.

dobbel

@Incremental

Ah so what happens on that page is that the navigation (expansion)item is highlighted because it’s defined route property to matches the current route of the app ( routes defined in vue-router).

Here’s a snippet with the active-class implemented.

...
<q-item active-class="tab-active" to="/dashboard" clickable>    
    <q-item-section avatar>
            <q-icon name="dashboard"/>     
    </q-item-section> 
                            
    <q-item-section>            
       Dashboard v1                            
    </q-item-section>                                
</q-item>
....
<style>
.tab-active {
    background-color: green;
  }
</style>

Incremental

Thanks a lot all for your comments.
As I use a component menu like in Dashblocks admin template, I solved it with :

<style  lang="scss" scoped>
/* Q-Item selected */
.q-item.q-router-link--active {
   color: var(--q-color-primary);
   background-color: $blue-1 !important;
}
</style>

Incremental

Hello, it’s me again !
I’m now playing with Dark Mode and customized my menu color conditionnaly within <q-item> properties.

As the Active class color is not a parameter, does anybody have an idea on how to modify dynamicly this CSS ?
Thanks.

metalsadman

@Incremental use a class selector, then class bindings ie.

<q-item :class="{ 'myclass': $q.dark.isActive }" ... 
.myclass {
  .q-item.q-router-link--active {
     color: var(--q-color-primary);
     background-color: $blue-1 !important;
  }
}

https://vuejs.org/v2/guide/class-and-style.html

Incremental

Thank you for your trick. My menu contains :

  <q-item
    v-else
    clickable
    v-ripple
    v-bind:key="item.link"
    :to="item.link"
    exact
    :class="SubItemClass"
    :active-class="itemActiveClass"
  >

If I replace :class=“SubItemClass” by :class="{ ‘myclass’: $q.dark.isActive }"
there is no effect.

I added menu background colors in my store and I change them dynamically when Light or Dark mode before using them in the menu logic.
All is perfectly configurable, but for the selected item, I can only highlight it with CSS.

So is it possible to keep my :class=“SubItemClass” and combine it with “{ ‘myclass’: $q.dark.isActive }” ?

metalsadman

@Incremental read the Vue docs link. You can use whichever method of binding that suits you based on that docs.