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

  • Admin

    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.


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.