@Graypes Hey there… sent you a message.

@metalsadman Thanks! I’ll check them out.

@beets Hmm… that’s very interesting, and potentially very helpful. Thanks for that input. Would you happen to have an example of how that works somewhere in a github repo or something? It would be great to be able to see an example visually.

@metalsadman Thanks for the response. Yes, this is basically my conclusion as well. And you’re right, 100+ components is a lot, hence the reason for the question… but in the end, you’re probably also correct - I should probably just globally register the layout/form components that are used 80% of the time or more, and just deal with the annoyance of having to do multiple imports on most pages. I guess I got spoiled (and a bit lazy) by having the ability to globally register.

@qyloxe Soo… your answer is basically to say that you don’t know the answer, and that I should just go figure it out myself - which I have been attempting to do using developer tools - and that I shouldn’t bother asking if any of the many knowledgeable developers here have had any experience on the subject. Nice.

I have about 100+ custom UI components for my website. Instead of having to import many of them on each different page on the site, I’ve basically imported them all via the [boot] section in quasar.config.js. Notice the ‘components’ section in quasar.config.js in the image below:

This references a components.js file which registers 100+ components as in this example (abbreviated):

I’ve been wondering, is this a good way to do this? Is there an impact on the initial application load?

Again, all of this is an exercise in not having to include all sorts of import statements into each SPA page that uses different components.

Is there a better way?

Seriously… I needed specific custom functionality all over my site and q-btn-dropdown simply doesn’t cut it. But… a q-menu inside a q-btn is epic. I can do easy offsets, capture open/close events, use custom styling and content.

q-btn with q-menu is a dream to use. So, thank you!!

@dobbel So what I did was the following and it works perfectly so far:

In app.sass

.lm-input-hilight.q-field--focused.q-field--outlined .q-field__control::after
	box-shadow: 0 0 5px rgba(81, 203, 238, 1)
	border: 1px solid rgba(81, 203, 238, 1)

I then simply applied my lm-input-hilight class as follows:

<q-input outlined dense class="lm-input-hilight" v-model="lmGlobalSearch" bg-color="white" placeholder="Search...">
	<template v-slot:prepend>
		<q-icon class="text-grey-5" name="search" />
	</template>
</q-input>

Thanks for your input, it led me to where I needed to be!

@dobbel Hey wow… that’s a good start. I’m going to try to work with that.

@dobbel Yes, that’s the type of glow I’m looking for. I’ve tried standout… I don’t see how to manipulate that to get the blue glow. Any other ideas?

I understand how the glow effect works in CSS, but applying it to a Quasar outlined text input field is alluding me to no end.

Has anyone tried/achieved this?

I feel like an idiot… lol. Thanks for the help, it worked.

I don’t know if I’m just not seeing a way to do it but it’s driving me a little batty.

Currently the text input doesn’t span the whole remaining part of the header as in the following image: https://imgur.com/NQQDn3s

I’ve solved the issue, sort-of. The following what I had to do:

<!-- Outer qbar (or div) class is ROW / Inner item class is COL or COL-AUTO -->

<q-bar class="row">
	<q-btn dense flat stretch class="col-auto" icon="menu_open" />
	<q-separator vertical />
	<q-tabs v-model="tab" no-caps dense inline-label align="left" class="col">
		<q-tab v-for="(n, index) in 12" name="mails" icon="mail" label="Candidate" />
	</q-tabs>
	<q-separator vertical />
	<q-btn dense flat stretch class="col-auto" icon="menu_open" />
</q-bar>

Hi all,

I have an issue. If I put my (horizontal) q-tabs component into a simple div, without setting the div’s width explicitly, the q-tabs component never goes into “scrollable” mode. Is there a way of doing this that I may be missing, without having to set the simple parent div’s width?

Edit: I’ve noticed that the q-tabs control gets a class of q-tabs–not-scrollable. I’ve looked through the quasar code a little bit trying to figure out why - so far, I’m not seeing it.

@tof06 Ugh… I didn’t think of that. I just tried it - it works. Thanks!

Hi all,

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?

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:

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?

Thanks… done.