0
493
ViewsDisable highlight on q-item (Quasar Framework)
When the current url is equal to :to="something" property, the q-item is highlighted in blue.
But I want q-item to keep black without highlighted in blue even though the current url is equal to the :to="something" property.
This is my q-item code (I use Quasar v2.0.4):
<q-item
:to="{ name: 'home' }"
>
<q-item-section avatar>
<q-icon name="home" size="md" />
</q-item-section>
<q-item-section>
Home
</q-item-section>
</q-item>
Is it possible to disable highlight on q-item?
·
Juan Pablo Isaza
2 answers
Answer question0
You can use active-class="remove-active":
<q-item
active-class="remove-active" // Here
:to="{ name: 'home' }"
>
<q-item-section avatar>
<q-icon name="home" size="md" />
</q-item-section>
<q-item-section>
Home
</q-item-section>
</q-item>
·
Juan Pablo Isaza
Report
0
You can use active-class="q-item-no-link-highlighting" to make q-item inactive keeping black:
<q-item
active-class="q-item-no-link-highlighting" // Here
:to="{ name: 'home' }"
>
<q-item-section avatar>
<q-icon name="home" size="md" />
</q-item-section>
<q-item-section>
Home
</q-item-section>
</q-item>
·
Juan Pablo Isaza
Report
Answer question