page with its own toolbar
-
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?
-
@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.
-
@metalsadman Finally got the codesandbox done.
https://codesandbox.io/s/magical-dust-vr54q?file=/src/pages/Test.vueYou’ll notice the toolbars are there but scroll out of sight.
-
Can anyone point me to a tutorial on layout + pages? Maybe I’m just not getting it.
-
@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:
-
@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.
-
@dobbel yes I know, but I wanted a toolbar per page not in the layout.
-
@kolaval go to Vue router docs and read about named views.
-
@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?
-
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
