How to style q-btn with :to

[sandroden]

Hi,

I’m trying to style a q-btn in a toolbar with :to prop as a way to navigate. While q-list item with :to prop set css class a.q-router-link--active--exact that allow an easy styling, q-btn does not. Am I using the wrong element for that purpose? How am I supposed to detect which is the active button?

My code in MyLayout is roughly:

<q-toolbar class="q-pt-md bg-primary text-grey-10">
        <router-link to="/"> <q-img ...  /></router-link>
        <q-space />
        <div class="gt-sm">
          <q-btn stretch flat label="base scout"  size="1em" :to="{name: 'base'}" />
          <q-btn stretch flat label="info"  size="1em" :to="{name: 'info'}" />
          <q-btn stretch flat label="foto"  size="1em" :to="{name: 'foto'}" />

Clearly I can use router-link explicitly and that works but :to on the button is a terse and nice syntax. I’d like to understand if the missing css class is the desired behaviour or not.

Thanks in advance
sandro

[metalsadman]

@sandroden not sure what you’re trying to accomplish but there’s an example in the docs using it as router link https://quasar.dev/vue-components/button#Example--Links.

[sandroden]

Thanks @metalsadman, that is exactly what I referred to with using explicitly. I hoped there was a way to ask q-btn :to to behave the same way, that would keep the syntax very symple.

[pd76]

Well, I faced the same necessity. In my case, with buttons inside a <q-toolbar>, I was able to workaround the issue as follows.

From this

<q-btn stretch flat :to="{ name: 'items' }" label="Items" />

To:

<q-btn stretch flat label="Items">
  <router-link
    exact
    :to="{ name: 'items' }"
    class="absolute full-width full-height"
  ></router-link>
</q-btn>

Style:

.router-link-active {
  border-bottom: 2px solid white;
}