Add Badges to my label Component

Anvil Q&A
1

What I’m trying to do:
I am trying to mimic the sample work done here:

How to create a simple CSS badge system - Stack Overflow

What I’ve tried and what’s not working:
I added the css to my theme.css , but I am not sure what the next step would be.

The objective would be to wrap a label component’s element with the “span” tag in the link provided above.

CSS:

[badge]:after {
      background: red;
    border-radius: 30px;
    color: #fff;
    content: attr(badge);
    font-size: 11px;
    margin-top: -10px;
    min-width: 20px;
    padding: 2px;
    position: absolute;
    text-align: center;
}


[badge^="-"]:after,
[badge="0"]:after,
[badge=""]:after {
   display: none;
}

Demo Usage:

<span badge="">Empty string</span>
<br>
<br>
<span badge="-1">-1</span>
<br>
<br>
<span badge="0">0</span>
<br>
<br>
<span badge="1">1</span>

Not sure where to go after that … Thanks for reading :slight_smile: !

What I have tried so far:

python

  def update_badge_number(self,num):
    for element in anvil.js.window.document.querySelectorAll("span[badge]"):
      print(element)
      element.textContent = "8"
      element.setAttribute('badge',"8")
3 Likes
2

I have this function I use in my app whenever I need to add badges

def notification_badge(comp,no,right=-8,top=5):
    if no>99:
        no='99+'
    dom=anvil.js.get_dom_node(comp)
    dom.style.position='relative'
    badge=HtmlTemplate(html=f'<span id="notif_badge" style="position: absolute;top: -10px;right: {right}px;padding: 6px 9px;border-radius: 50px;background-color: red;color:white;font-size:12px;margin-top:{top}px;line-height:110%;">{no}</span>')
    dom.appendChild(anvil.js.get_dom_node(badge))
    
def remove_notification_badge(comp):
        from anvil.js.window import jQuery
        dom=anvil.js.get_dom_node(comp)
        jQuery(dom).find('#notif_badge').remove()

Just pass it a comp and the number to show on the badge. You can adjust the position of right and top also (The current values are suited for my case).

4 Likes