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

  • @sandroden not sure what you’re trying to accomplish but there’s an example in the docs using it as router link

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

Log in to reply