How to style q-btn with :to



  • 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



  • @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.



  • 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.



  • 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;
    }
    

Log in to reply