How to get more than one badge per element?

[roni]

Is it possible to have two badges, like in the image?

[s.molinari]

Yup.

https://codepen.io/smolinari/pen/dybJdyj?editors=1010

Scott

[Hawkeye64]

very nice, @s-molinari !

[qyloxe]

Strangely exciting solution @s-molinari
Maybe there is a hope for some slots in q-avatar - top-left, bottom-right, etc.?
… or universal extension with corner slots for any quasar component (if it is at all possible?)

[s.molinari]

I was thinking more along the lines of making additional props for QBadge. Something like. vertical-position: top|middle|bottom (which is already there) and horizontal-position: right|center|left and also have an offset:[x, y]. I’d also like to see a round prop.

But, I was told by the master, it would be simpler to just leave it to devland to use CSS and he’s right, it’s not that hard. Also have a look at these:

https://codepen.io/rstoenescu/pen/vYBpdMY?editors=1010
https://codepen.io/rstoenescu/pen/MWgrVYG?editors=101

Scott

[roni]

Thank you so much for the solution, sorry the delay in my response, I thought I would get an email for every answer

[s.molinari]

@roni - You have to explicitly turn on email notifications.

Scott

[roni]

Done, thanks @s-molinari

[qyloxe]

@s-molinari said in How to get more than one badge per element?:
…

But, I was told by the master, it would be simpler to just leave it to devland to use CSS and he’s right, it’s not that hard. Also have a look at these:

…

https://codepen.io/rstoenescu/pen/MWgrVYG?editors=101

Scott

Hi Scott, I wonder if there is a preferred solution for capturing click events from those badges:

https://codepen.io/qyloxe/pen/xxKaXmw?editors=1111

The “obvious one” is not working as I can only see “tab click” on console instead of “badge click”:

[s.molinari]

I’d venture to say, QBadge was never intended to get clicked.

Scott

[qyloxe]

@s-molinari said in How to get more than one badge per element?:

I’d venture to say, QBadge was never intended to get clicked.

Hmm, don’t know what to say - those badges looks perfect BTW even with .native modifier, click doesnt work, too. I always assumed, that .native means, that developer from userland wants to handle DOM events at the tags level.

So, maybe there is a preferred solution to “close tab button” in quasar 1.+? Something like this (from 0.17 code):

[s.molinari]

How about just using a button?

Scott

[qyloxe]

@s-molinari said in How to get more than one badge per element?:

How about just using a button?

Doesn’t seem to work either. In spite of bottom positioning, the click events are not propagated to q-btn, too. I tried with native, z-index etc. also:

https://codepen.io/qyloxe/pen/xxKaXmw?editors=1111

[metalsadman]

@qyloxe the click events are not being caught by the default slots because the parent div has no-pointer-events class. https://quasar.dev/style/other-helper-classes#Mouse-Related. can submit a report for this pls, thx. nvm, see @s-molinari 's workaround below.

[s.molinari]

I found this fix. Add style="pointer-events: auto;"

https://codepen.io/smolinari/pen/YzKOvmV?editors=1011 (only did the first button with the “X”)

Scott

[metalsadman]

@s-molinari that nullifies the class i mentioned above then. wonder why it was there tho? @rstoenescu

[qyloxe]

@s-molinari said in How to get more than one badge per element?:

style=“pointer-events: auto;”

Great catch @s-molinari !! Q-badge works with your solution, too! Eventually, we have now a VERY interesting use case with many, many possibilities. I wonder why this css class was put there anyway, maybe something with ripple effect?

In q-tree nodes it is placed also. Now I know, why there were problems with dynamic popup menus in q-tree nodes in one of my components.