0.14 QTab sizing
-
What’s the proper/best way to make QTabs more compact? They take up quite a bit of screen real-estate when combined with the toolbar.
Unless I missed it, it would be nice if this was a component parameter.
-
The best solution is the have the toolbar and tabs hide when scrolling, which is a standard feature of the layout. Something else you can do is adjust the tab min height in the stylus variables. http://beta.quasar-framework.org/components/stylus-variables.html
Learn more about theming here: http://beta.quasar-framework.org/guide/quasar-theming.html
Learn more about the layout features: http://beta.quasar-framework.org/components/layout.html (especially the “reveal” prop)
Scott
-
You can just set the width of the parent element and the tabs will change accordingly.
-
I’d say his issue is with the height, not the width.
Scott
-
Oh, if it is about the height, then forget what I said.
-
It is the height I’d like to trim some fat off of, yes.
Thanks for the feedback Scott. I am using the reveal prop and it works great. I’ll try to mess around with the stylus pieces you recommended as it still feels too chunky , especially in desktop view. It would be nice if it behaved similar to QBtn, having a “small” prop available to optionally trim it down as well.
-
One other thing I think I asked Razvan for was a way to put icons next to the text in the tabs, instead of on top, as the icons over the text makes the tab bar a lot more “chunky” as you put it. Since the tabs have scrolling, the width isn’t such an issue and I think it looks better on the desktop. The icons on top of the text is Material design spec conform and I can’t remember what Razvan replied. Oh well. See what you can do. I’m sure you’ll get tabs where you need them.
Scott
-
Yes sir. I ended up sizing the tab icons to same font-size as a small qbtn and removed the labels. I’m using tooltips to replace the labels. It should be fine what I’m trying to do for now. Thanks for responding.
-
I agree with @kayex that the tabs look fairly bulky (especially the height), even more so if the app’s toolbar also is that big. The end result is that it all looks just a bit too clunky and not really elegant.
To deal with this, I ended up making the font size and icon font size smaller, as well as the padding and min height. All of this through variables in app.variables.styl:
$tabs-font-size ?= .8rem
$tabs-icon-font-size ?= 23px
$tabs-padding-with-icon ?= 8px 10px
$tabs-min-height-with-icon ?= 48pxSame exercise for the app’s toolbar, in that case making the toolbar less “high” was simply a matter of specifying “small” on the buttons:
<q-toolbar glossy slot=“header”>
…
<q-btn flat small round …
…This results in a UI that looks just a little more subtle and less clunky.
