Add Badges to my label Component

Anvil Q&A
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