🔍 Code Extractor

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

Purpose

Browser_button is a reactive UI component built on Panel's ReactiveHTML framework. It creates an interactive button with customizable icon (file or folder) and text label. The component tracks the number of clicks and provides a callback mechanism for responding to click events. It's designed for file browser interfaces or similar applications where users need to interact with file/folder representations.

Source Code

class Browser_button(ReactiveHTML):
    text = param.String()
    clicks = param.Integer(default=0)
    button_type = param.Selector(default='folder', objects=['folder','file'])
    
    _template = """
    <button id="BrowserButton" onclick="${_click}" class="browser-button"><i class="fa fa-{{ button_type }}"></i>{{ text }}</button>
    """
    
    def _click(self, e):
        self.clicks+=1
        
    def on_click(self, callback):
        return self.param.watch(callback, 'clicks', onlychanged=False)

Parameters

Parameter Details

text: String parameter that sets the label text displayed on the button. Can be any string value representing the file or folder name.

clicks: Integer parameter that tracks the total number of times the button has been clicked. Defaults to 0 and increments with each click.

button_type: Selector parameter that determines which icon to display. Must be either 'folder' or 'file'. Defaults to 'folder'. This controls the Font Awesome icon class used in the template.

Return Value

Instantiation returns a Browser_button object that is a Panel ReactiveHTML component. The on_click method returns a watcher object that can be used to manage the callback subscription. The _click method does not return a value (implicitly returns None).

Class Interface

Methods

Attributes

Dependencies

• param
• panel
• panel.reactive.ReactiveHTML
• panel.layout.base.NamedListLike

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 Browser_button(ReactiveHTML):
    text = param.String()
    clicks = param.Integer(default=0)
    button_type = param.Selector(default='folder', objects=['folder','file'])
    
    _template = """
    <button id="BrowserButton" onclick="${_click}" class="browser-button"><i class="fa fa-{{ button_type }}"></i>{{ text }}</button>
    """
    
    def _click(self, e):
        self.clicks+=1
        
    def on_click(self, callback):
        return self.param.watch(callback, 'clicks', onlychanged=False)

# Initialize Panel extension
pn.extension()

# Create a folder button
folder_btn = Browser_button(text='My Documents', button_type='folder')

# Create a file button
file_btn = Browser_button(text='report.pdf', button_type='file')

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

# Register callback
folder_btn.on_click(handle_click)

# Display in a Panel app
app = pn.Column(folder_btn, file_btn)
app.servable()

Best Practices

• Always initialize Panel extension with pn.extension() before creating Browser_button instances
• Use on_click() method to register callbacks rather than directly watching the clicks parameter
• The clicks parameter increments indefinitely - consider resetting it if needed for your use case
• Ensure Font Awesome CSS is loaded in your application for icons to render correctly
• The button_type parameter only accepts 'folder' or 'file' - attempting other values will raise a validation error
• Callbacks registered with on_click receive an event object with 'new' and 'old' values for the clicks count
• The _click method is internal and should not be called directly - it's triggered by the HTML onclick event
• Multiple callbacks can be registered on the same button instance using multiple on_click() calls
• The component inherits from ReactiveHTML, so all Panel reactive features are available

Tags

Similar Components

AI-powered semantic similarity - components with related functionality:

• class Focus_button 73.2% 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 Confirm_button 63.1% 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

• class Toolbar 62.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 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 Inbox 55.3% 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