How to create links like the ones at quasar page

[danielo515]

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.

[danielo515]

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-toolbar>
     <q-btn icon="fa-github" flat>GITHUB</q-btn>
      <q-toolbar-title></q-toolbar-title>
       <q-btn icon="fa-github" flat>GITHUB</q-btn>
 </q-toolbar>

[danielo515]

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

[a47ae]

@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')(https://router.vuejs.org/en/essentials/navigation.html)

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

[rstoenescu]

Quasar Play is open source too (like everything Quasar-ish). So take a look at its repo to see how it’s done: https://github.com/quasarframework/quasar-play/blob/dev/src/components/showcase/layout-showcase.vue

[a47ae]

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.

[danielo515]

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