[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?

    srtabs.jpg



  • 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>
    	<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" />
    	</q-tabs>
    </q-toolbar>
    

    It looks much better now:
    b879652a-3a19-4894-9a36-1731e574303e-image.png
    78e22e8e-2d3b-446c-bdba-1ed956a7eda3-image.png


Log in to reply