Disable highlight on q-item

[silvain]

Hi,

i’m using a q-list without “highlight” but when i use to="…" on a q-item the highlight is still use on that specific q-item. Is it possible to disable the highlight?

Silvain

[silvain]

Anyone? I looked at the source code of quasar framework but can’t figure out how to solve it.

<q-list>
<q-item to="…">

This will result in the q-item element being highlighted when selected on desktop browser. Also, when I scroll a page on the safari browser on ios and it contains a lot of q-items then the user sees the highlighted item. I don’t want the user to see this.

[DerekM]

Hopefully you’ve found the answer after 9 months of waiting but here is a solution.

In q-item set the “active-class” to a style that is empty. <router-link> will always apply the active style to the active item but that just means the style that will be applied will have no style, and thus the active item will not be highlighted.

<q-item :to="{name:'home'}" active-class="q-item-no-link-highlighting">
       <q-item-side icon="fas fa-home"></q-item-side>
       <q-item-main label="Home"></q-item-main>
 </q-item>

   .q-item-no-link-highlighting { }

[steve]

instead of using the “to”, why don’t you simply add a @click event and then push to where you need to go?