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


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



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


  • Admin

    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



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