Question

0

314

Vistas

Disable 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?

almost 3 years ago · Juan Pablo Isaza

2 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-07-11T16:05:45.958Z

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>

Answer 2 · 2022-07-11T16:05:45.964Z

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>

0

314

Disable highlight on q-item (Quasar Framework)

2 Respuestas

0

0

Encuentra empleos remotos

Andres GPT