How to create links like the ones at quasar page

  • Hello,

    This may sound stupid, but I am having a bad time trying to create a simple button that translates into a link. I want something similar to what quasar has on its home page for links to this forum or the github repository, I mean the links on the toolbar. If I use the QSideLink element the link is close to invisible, and it totally dissapears when I hover it.

    Also I want to put my normal links that will open a new external page on the right of the sidebar and the regular tool buttons (the ones for internal navigation) on the left side of the sidebar. I can’t find the proper instructions on the documentation.

    Thanks in advance.

  • This was surprising and a bit shoking, but putting a q-sidebar-title between the two groups of buttons achieved the desired effect. Even with an empty title it works.

         <q-btn icon="fa-github" flat>GITHUB</q-btn>
           <q-btn icon="fa-github" flat>GITHUB</q-btn>

  • Now the only thing missing is how to create a link that looks like a button

  • @danielo515 Why not use a normal button and use the @click event and in the handler, you do something like this this.$router.push('/new-page')(

    Or if you want to open an external URL use the open helper util

  • Admin

    Quasar Play is open source too (like everything Quasar-ish). So take a look at its repo to see how it’s done:

  • I guess by Quasar home page @danielo515 doesn’t refer to the showcase, but the docs page, which is of course also open source, but is not a Quasar application.

  • As @a47ae said I was referring to the documentation page, sorry for being unclear. I took a look and I was surprised to see some ejs templates in there.
    Using the click event will break the semantics of the link element. I ended using an a tag with all the button classes except q-btn. I think that offering an element (or set of directives ) to style a link to look like a button is something reasonable, I saw it at several places

Log in to reply

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.