[Workaround Found] Is there a way to lock the first q-tab?

  • Hi all,

    I was wondering if there was a way to lock a q-tab into the first position? Or just the first q-tab? My current solution is to have two q-tabs strips next to each other, therefore, “search” is in the first q-tabs strip, and everything else is in the right-hand tabs strip. Here are the thoughts behind all this:

    1. I don’t want the “search” tab to just be a button as I have it linked to my router as a q-route-tab. When it is selected it gets highlighted just like any other tab.
    2. I want to always be able to have the search tab available, even if the right-hand tabs scroll horizontally.
    3. The top image shows that the tab strips don’t seem to be the same height - but this can be an optical illusion and my eyes are messed up. For some reason it doesn’t look right.
    4. By having 2 tab strips side-by-side I notice that the shadow-2 from the two strips are overlapping. I want to keep the shadow below the strips - I just don’t want them to overlap side-by-side.

    Hence the question agian - Is there some way to lock a tab into place?


  • I figured out a nice solution:

    I wrapped the two tab strips in a toolbar and just set some toolbar properties, and done. Nice.

    <q-toolbar class="shadow-2" style="padding: 0; min-height: 0px; display: inherit;">
    	<q-tabs class="sr-tabs" dense align="left" inline-label indicator-color="primary" no-caps style="float:left">
    		<q-route-tab name="search" icon="search" label="Search" to="/candidates/search" />
    	<q-tabs dense align="left" v-model="tab" inline-label indicator-color="primary" no-caps>
    		<q-route-tab icon="mail" to="/candidates/mail" exact />
    		<q-tab name="alarms" icon="alarm" label="Alarms" />
    		<q-tab name="movies" icon="movie" label="Movies" />
    		<q-tab name="photos" icon="photo" label="Photos" />
    		<q-tab name="videos" icon="slow_motion_video" label="Videos" />

    It looks much better now:

Log in to reply