🔍 Code Extractor

class Clickable_header

Maturity: 36

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

File:
/tf/active/vicechatdev/resources/py2html.py
Lines:
280 - 292
Complexity:
simple

Purpose

This class creates an interactive header element that can be clicked by users. It extends Panel's ReactiveHTML to provide a reactive UI component that maintains click state and allows callbacks to be registered for click events. Useful for creating interactive dashboards, navigation elements, or any UI where click tracking on headers is needed.

Source Code

class Clickable_header(ReactiveHTML):
    text = param.String()
    clicks = param.Integer(default=0)
    
    _template = """
    <a id="ClickText" href="#" onclick="${_click}">{{ text }}</a>
    """
    
    def _click(self, e):
        self.clicks+=1
        
    def on_click(self, callback):
        return self.param.watch(callback, 'clicks', onlychanged=False)

Parameters

Name Type Default Kind
bases ReactiveHTML -

Parameter Details

text: A string parameter that defines the text content displayed in the clickable header. This is a Panel param.String that can be dynamically updated.

clicks: An integer parameter that tracks the total number of times the header has been clicked. Defaults to 0 and automatically increments with each click.

Return Value

Instantiation returns a Clickable_header object that can be added to Panel layouts. The on_click method returns a watcher object that can be used to manage the callback subscription.

Class Interface

Methods

__init__(text: str = '', clicks: int = 0, **params)

Purpose: Initialize a new Clickable_header instance with optional text and click count

Parameters:

  • text: The text to display in the header (default: empty string)
  • clicks: Initial click count (default: 0)
  • **params: Additional parameters passed to ReactiveHTML parent class

Returns: A new Clickable_header instance

_click(self, e) -> None

Purpose: Internal method that handles click events and increments the click counter

Parameters:

  • e: Event object passed from the JavaScript onclick handler

Returns: None - modifies the clicks attribute as a side effect

on_click(self, callback) -> Watcher

Purpose: Register a callback function to be called whenever the header is clicked

Parameters:

  • callback: A callable that accepts an event object with 'new' and 'old' attributes representing click counts

Returns: A Watcher object that can be used to unwatch/remove the callback later

Attributes

Name Type Description Scope
text param.String The text content displayed in the clickable header. Can be dynamically updated to change the displayed text. class
clicks param.Integer Counter tracking the total number of clicks on the header. Starts at 0 and increments with each click. class
_template str HTML template string defining the component's structure. Contains an anchor tag with onclick binding to _click method. class

Dependencies

  • param
  • panel

Required Imports

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

Usage Example

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

class Clickable_header(ReactiveHTML):
    text = param.String()
    clicks = param.Integer(default=0)
    
    _template = """
    <a id="ClickText" href="#" onclick="${_click}">{{ text }}</a>
    """
    
    def _click(self, e):
        self.clicks+=1
        
    def on_click(self, callback):
        return self.param.watch(callback, 'clicks', onlychanged=False)

# Create an instance
header = Clickable_header(text='Click Me!')

# Define a callback function
def handle_click(event):
    print(f'Header clicked {event.new} times')

# Register the callback
header.on_click(handle_click)

# Display in a Panel app
pn.extension()
app = pn.Column(header, pn.pane.Markdown('Click the header above'))
app.servable()

Best Practices

  • Always set the 'text' parameter when instantiating to provide meaningful content for the header
  • Use the on_click method to register callbacks rather than directly watching the 'clicks' parameter
  • The clicks counter is cumulative and never resets automatically - reset manually if needed by setting header.clicks = 0
  • The component must be used within a Panel application context (after calling pn.extension())
  • Callbacks registered with on_click will fire every time clicks changes, even if set to the same value (onlychanged=False)
  • The _click method is internal and should not be called directly by users
  • This component renders as an HTML anchor tag, so it will have default link styling unless CSS is applied

Tags

ui-component interactive click-tracking panel reactive header event-handling callback html-component

Similar Components

AI-powered semantic similarity - components with related functionality:

  • class Toolbar 64.2% similar

    A reactive HTML toolbar component that displays social media links and a settings button, tracking the number of clicks on the settings icon.

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

  • class Focus_button 62.8% 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 Inbox 60.2% similar

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

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

  • class Browser_button 60.2% 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 Click_watcher 59.8% 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
← Back to Browse