Controlling position of tabs in layout toolbar
Is it possible to get tabs to float left next to a toolbar title, with nothing but empty space to the right? Currently, the code below puts the title top left, and the tabs top right, which looks very odd on a wide desktop window. I tried applying the positioning classes to the tabs, but couldn’t get anything to change.
Supplementary question - is it possible to make the
q-toolbar-titleclickable like a tab to get back to the ‘home’ page (
'/')? I tried adding a click handler to it, but nothing seems to happen, and the mouse pointer would obviously need updating too.
<template> <div> <q-layout> <div slot="header" class="toolbar"> <q-toolbar-title>Page Title</q-toolbar-title> <q-tabs> <q-tab route="/route1"> First Tab </q-tab> <q-tab route="/route2"> Second Tab </q-tab> </q-tabs> <div></div> </div> <router-view></router-view> </q-layout> </div> </template>
Use CSS helper classes from here: http://quasar-framework.org/api/css-grid-layout.html
to add the “space” you want, add an empty
<div class="auto"></div>between title and tabs.