How to get more than one badge per element?
-
@roni - You have to explicitly turn on email notifications.
Scott
-
Done, thanks @s-molinari
-
@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”:
-
I’d venture to say, QBadge was never intended to get clicked.
Scott
-
@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):
-
How about just using a button?
Scott
-
@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
-
@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. -
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
-
@s-molinari that nullifies the class i mentioned above then. wonder why it was there tho? @rstoenescu
-
@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.