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

    page with its own toolbar

    Help
    3
    10
    398
    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.
    • K
      kolaval last edited by

      I have a layout with 2 sub pages (in QRouteTab) each containing QPage.
      I want a custom toolbar in the header of each page (with options) but I have not gotten it working properly yet.

      If I add a QToolbar to the QPage then it scrolls out of view.
      Can do I add a toolbar that is elevated and stays on top even when scrolling a list?

      metalsadman 1 Reply Last reply Reply Quote 0
      • metalsadman
        metalsadman @kolaval last edited by

        @kolaval make a codepen of what you’ve done so far. or check this example of how I implemented it https://codesandbox.io/s/quasar-v1-samples-0ybb3.

        K 1 Reply Last reply Reply Quote 0
        • K
          kolaval @metalsadman last edited by

          @metalsadman Finally got the codesandbox done.
          https://codesandbox.io/s/magical-dust-vr54q?file=/src/pages/Test.vue

          You’ll notice the toolbars are there but scroll out of sight.

          dobbel 1 Reply Last reply Reply Quote 0
          • K
            kolaval last edited by

            Can anyone point me to a tutorial on layout + pages? Maybe I’m just not getting it.

            dobbel 1 Reply Last reply Reply Quote 0
            • dobbel
              dobbel @kolaval last edited by dobbel

              @kolaval you should look how the router works in a default Quasar app.
              Layout + page both are rendered with <router-view>

              this is a pretty complicated demo:

              https://github.com/vycoder/qodo

              1 Reply Last reply Reply Quote 0
              • dobbel
                dobbel @kolaval last edited by dobbel

                @kolaval they scroll out of sight because the toolbars are not in a q-header component. You do have a footer so the the tabs do stay on screen.

                K 1 Reply Last reply Reply Quote 0
                • K
                  kolaval @dobbel last edited by

                  @dobbel yes I know, but I wanted a toolbar per page not in the layout.

                  metalsadman 1 Reply Last reply Reply Quote 0
                  • metalsadman
                    metalsadman @kolaval last edited by

                    @kolaval go to Vue router docs and read about named views.

                    1 Reply Last reply Reply Quote 0
                    • K
                      kolaval last edited by

                      @metalsadman can I have a layout without a QToolBar and have it’s pages have thei own toolbar that is elevated and fixed to the top?

                      dobbel 1 Reply Last reply Reply Quote 0
                      • dobbel
                        dobbel @kolaval last edited by dobbel

                        @kolaval

                        I changed your code to have different headers that stick to the top 🙂

                        • changed layout: removed your tabs with the router-view in them. The tabs are not needed.
                        • changed layout: added a router-view with name ‘my-header’ for the different headers
                        • created 2 header components in components folder
                        • changed the router.js to set different headers for each route

                        https://codesandbox.io/s/multi-header-quasar-h6c3c

                        I used this article btw:

                        https://medium.com/swlh/using-named-routes-and-named-views-with-vue-router-fbbef61a503f

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