🔍 Code Extractor

A reactive HTML component that displays a mailbox/notification icon with a badge indicator and tracks user clicks.

Purpose

The Inbox class provides an interactive notification widget that displays an envelope icon with an optional red badge indicator. It's designed to show new messages or notifications and track user interactions through click events. Built on Panel's ReactiveHTML framework, it combines HTML templating with reactive parameters to create a dynamic UI component that can be integrated into Panel dashboards or applications.

Source Code

class Inbox(ReactiveHTML):
    """
    A mailbox to display new messages
    
    attributes
    ----------
    badge : param.Selector
        Whether the red indicator is active or not, badge-on to show the indicator, badge-off to hide it.
    clicks : paramm.Integer
        The number of clicks
    """
    badge = param.Selector(default='badge-off', objects=['badge-on','badge-off'])
    clicks = param.Integer(default=0)
        
    _template = """
    <a id='notification' onclick="${script('on_click')}" href="#" class="notification">
      <i id='img' class="far fa-envelope" aria-hidden="true"></i>
      <span id='msgs' class="${badge}"></span>
    </a>
    """
    
    _scripts = {
    "on_click":
    """
        data.clicks += 1
    """,
    }

        
    def on_click(self, callback):
        """Set a callback on the clicks parameters"""
        return self.param.watch(callback, 'clicks', onlychanged=False)

Parameters

Parameter Details

badge: A Selector parameter that controls the visibility of the red notification badge. Accepts 'badge-on' to display the indicator or 'badge-off' to hide it. Defaults to 'badge-off'. This allows toggling the visual notification state.

clicks: An Integer parameter that tracks the number of times the notification icon has been clicked. Defaults to 0. Automatically increments each time the user clicks the notification element.

Return Value

Instantiating the Inbox class returns an Inbox object, which is a ReactiveHTML component that can be displayed in Panel applications. The on_click method returns a watcher object that monitors changes to the clicks parameter and executes the provided callback function.

Class Interface

Methods

Attributes

Dependencies

• param
• panel
• panel.reactive
• panel.layout.base

Required Imports

import param
import panel as pn
from panel.reactive import ReactiveHTML

Usage Example

import panel as pn
from panel.reactive import ReactiveHTML
import param

# Define the Inbox class (as provided)
class Inbox(ReactiveHTML):
    badge = param.Selector(default='badge-off', objects=['badge-on','badge-off'])
    clicks = param.Integer(default=0)
    _template = """
    <a id='notification' onclick="${script('on_click')}" href="#" class="notification">
      <i id='img' class="far fa-envelope" aria-hidden="true"></i>
      <span id='msgs' class="${badge}"></span>
    </a>
    """
    _scripts = {"on_click": "data.clicks += 1"}
    def on_click(self, callback):
        return self.param.watch(callback, 'clicks', onlychanged=False)

# Instantiate the inbox
inbox = Inbox()

# Set badge to show notification
inbox.badge = 'badge-on'

# Define a callback for click events
def handle_click(event):
    print(f'Inbox clicked {event.new} times')
    if event.new >= 3:
        inbox.badge = 'badge-off'

# Register the callback
inbox.on_click(handle_click)

# Display in a Panel app
pn.serve(inbox)

Best Practices

• Always define CSS styles for .notification, .badge-on, and .badge-off classes to ensure proper visual appearance
• Include Font Awesome CSS in your application for the envelope icon to render correctly
• Use the on_click method to register callbacks rather than directly watching the clicks parameter for cleaner code
• Toggle the badge parameter between 'badge-on' and 'badge-off' to show/hide notifications based on application state
• The clicks parameter increments on every click; reset it manually if needed for your use case
• Remember that this is a ReactiveHTML component, so it must be used within a Panel application context
• The component inherits from ReactiveHTML, so all Panel reactive features are available
• Consider using onlychanged=True in custom watchers if you only want to trigger on actual value changes

Tags

Similar Components

AI-powered semantic similarity - components with related functionality:

• class Clickable_header 60.2% similar

  A clickable header component that displays text as a hyperlink and tracks the number of times it has been clicked.

  From: /tf/active/vicechatdev/resources/py2html.py

• class Focus_button 57.0% similar

  A custom Panel ReactiveHTML button widget that displays an eye icon and tracks the number of times it has been clicked.

  From: /tf/active/vicechatdev/resources/py2html.py

• class Click_watcher 55.5% similar

  A wrapper class that adds click detection functionality to Panel objects by wrapping them in a clickable div element and tracking the number of clicks.

  From: /tf/active/vicechatdev/resources/py2html.py

• class Browser_button 55.3% similar

  A custom Panel ReactiveHTML button component that displays a file or folder icon with text and tracks click events.

  From: /tf/active/vicechatdev/resources/py2html.py

• class Confirm_button 54.2% similar

  A custom Panel button widget that conditionally displays a confirmation dialog before registering clicks, built on ReactiveHTML with integrated JavaScript handlers.

  From: /tf/active/vicechatdev/resources/py2html.py