Request: Bottombar component

[wvansl]

Has anyone created a kind of bottombar component in quasar?
There is no support for this “out of the box” but they exist in other frameworks like
vuetify: https://vuetifyjs.com/en/components/bottom-navigation
vue-material: https://vuematerial.io/components/bottom-bar/home

I believe this would be a nice addon to Quasar but I’m inexperienced in Vue at the moment so I was wondering if someone managed to do this.

I managed to use the Tab component as bottomtab and changed little css to make it stuck at bottom and full height for the tab-route but then I still would have to style the tabs better.

Any ideas are welcome!

[leopiccionia]

You can already achieve this with Quasar. https://jsfiddle.net/t4ra7d7n/

[wvansl]

@leopiccionia
I agree. But there is still a huge difference between a “real material design” bottombar and tabs that you put on the bottom…

[leopiccionia]

Could you be more specific, please?

Looking at Material Design’s bottom navigation spec, I can’t see anything that you can’t achieve using the elements on Fiddle + q-route-tab and q-tab-pane.
https://material.io/guidelines/components/bottom-navigation.html#

If you want to reuse it in many layouts, it’s trivial to create your own Bottombar component with a slot to tabs.

[wvansl]

@leopiccionia said in Request: Bottombar component:

Could you be more specific, please?

Looking at Material Design’s bottom navigation spec, I can’t see anything that you can’t achieve using the elements on Fiddle + q-route-tab and q-tab-pane.
https://material.io/guidelines/components/bottom-navigation.html#

If you want to reuse it in many layouts, it’s trivial to create your own Bottombar component with a slot to tabs.

You might be right with that but it would require a lot of overriding of css if I’m not mistaken right?
I always wondered if “overriding” default tab styles for a specific component is easy to do or not.

I am just learning the tricks of Vue so it is quite an early stage for me.

[benoitranque]

use the footer component and make it fixed…

[leopiccionia]

Firstly, it’s important to note that Quasar is Material-inspired, but not pixel-perfect Material-compliant, as elements should look good on both Material and iOS themes, on many screen sizes and platforms, etc.

Overriding Quasar default style is very simple: when you inspect element, you’ll notice that Quasar exposes classes like q-tabs , q-tab, q-tabs-scroller, q-tab-icon, q-tab-label and active (for current tab). Just target those CSS classes, not component names.