@tof06 Ugh… I didn’t think of that. I just tried it - it works. Thanks!
Posts made by Q-Brad
RE: [Solved] Is there a way to use a q-spinner (or SVG) as the icon for a q-route-tab?
[Solved] Is there a way to use a q-spinner (or SVG) as the icon for a q-route-tab?
Does anyone know if there’s a way to use a q-spinner as the icon for a q-route-tab?
I’m already using a spinning font-awesome icon, as shown below in the Moira tab, but it would be great to be able to use the q-spinner svg as an icon.
<q-route-tab to="/moira" :ripple="false" name="moira" icon="fa fa-spinner fa-spin" label="Moira (dt)"/>
Has anyone done this or have any ideas?
RE: [Workaround Found] Is there a way to lock the first q-tab?
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:
[Workaround Found] Is there a way to lock the first q-tab?
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:
- 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.
- I want to always be able to have the search tab available, even if the right-hand tabs scroll horizontally.
- 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.
- 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?
RE: [Solved] Strange Behavior - Going past last q-btn in q-toolbar activates the first q-btn.
@metalsadman Thanks so much! That solved my issue. It was driving me nuts a little bit. The strange thing is that, as you can see from my images, the icon was still displaying properly. Weird.
Edit: Is there a way to mark your answer as the correct one… or solved?
[Solved] Strange Behavior - Going past last q-btn in q-toolbar activates the first q-btn.
New here to the forum. I’ve been using Quasar for a while now - but when I started using the newer version 1.9.8, I seem to be having an issue with the q-toolbar/q-btn. Has anyone been experiencing this?
Image-1: Hovering over the last button normally.
Image-2: Moving past the last button highlights the first button and if I click, will activate the first button.
I’ve only made a few changes to the code after creating the project… as such:
<q-header> <q-toolbar> <q-toolbar-title>App Title</q-toolbar-title> <q-btn flat dense round aria-label="Comments" icon="r_comment_text" to="/comments" /> <q-btn flat dense round aria-label="Notifications" icon="r_notifications" to="/notify" /> <q-btn flat dense round aria-label="Account" icon="r_account_circle" to="/account" /> </q-toolbar> </q-header>
Anyone else getting this?