No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    How to create links like the ones at quasar page

    Help
    3
    7
    7284
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • D
      danielo515 last edited by

      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.

      1 Reply Last reply Reply Quote 0
      • D
        danielo515 last edited by

        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>
        1 Reply Last reply Reply Quote 0
        • D
          danielo515 last edited by

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

          1 Reply Last reply Reply Quote 0
          • a47ae
            a47ae last edited by

            @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

            1 Reply Last reply Reply Quote 0
            • rstoenescu
              rstoenescu Admin last edited by

              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

              1 Reply Last reply Reply Quote 0
              • a47ae
                a47ae last edited by

                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.

                1 Reply Last reply Reply Quote 0
                • D
                  danielo515 last edited by

                  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

                  1 Reply Last reply Reply Quote 0
                  • First post
                    Last post