{
"cells": [
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"import panel as pn\n",
"import panel_material_ui as pmui\n",
"\n",
"pn.extension()"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"The `IconButton` widget allows triggering events when the button is clicked. In addition to a value parameter, which will button from `False` to `True` while the click event is being processed an additional `clicks` parameter that can be watched to subscribe to click events.\n",
"\n",
"This widget displays a default `icon` initially. Upon being clicked, an `active_icon` appears for a specified `toggle_duration`.\n",
"\n",
"For instance, the `ButtonIcon` can be effectively utilized to implement a feature akin to ChatGPT's copy-to-clipboard button.\n",
"\n",
"Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](https://panel.holoviz.org/how_to/interactivity/index.html). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](https://panel.holoviz.org/how_to/links/index.html) or [how to use them as part of declarative UIs with Param](https://panel.holoviz.org/how_to/param/index.html).\n",
"\n",
"#### Parameters:\n",
"\n",
"For details on other options for customizing the component see the [customization guides](https://panel-material-ui.holoviz.org/customization/index.html).\n",
"\n",
"##### Core\n",
"\n",
"* **`active_icon`** (`str`): The name of the icon to display when toggled from [Material Icons](https://fonts.google.com/icons?icon.set=Material+Icons) or an SVG.\n",
"* **`clicks`** (`integer`): The number of times the icon was clicked.\n",
"* **`disabled`** (`bool`): Whether the widget is editable\n",
"* **`href`** (str): An optional link to navigate to when clicking the button.\n",
"* **`icon`** (`str`): The name of the icon to display from [Material Icons](https://fonts.google.com/icons?icon.set=Material+Icons) or an SVG.\n",
"* **`target`** (str): Where to open the `href` link. Default is `_self`, i.e. in the current window or tab.\n",
"* **`toggle_duration`** (`int`): The number of milliseconds the active_icon should be shown for and how long the button should be disabled for.\n",
"* **`value`** (`bool`): Toggles from False to True while the event is being processed.\n",
"\n",
"##### Display\n",
"\n",
"* **`description`** (`str | Bokeh Tooltip | pn.widgets.TooltipIcon`): A description which is shown when the widget is hovered.\n",
"* **`icon_size`** (`str`): Controls the size of the icon. Usually automatically determined based on the `size` but can be used to control icon size independently.\n",
"* **`label`** (`str`): The title of the widget\n",
"* **`size`** (`Literal[\"small\", \"medium\", \"large\"]`): Controls the size of the widget.\n",
"\n",
"##### Styling\n",
"\n",
"* **`sx`** (dict): Component level styling API.\n",
"* **`theme_config`** (dict): Theming API.\n",
"\n",
"##### Aliases\n",
"\n",
"For compatibility with Panel certain parameters are allowed as aliases:\n",
"\n",
"* **`name`**: Alias for `label`\n",
"\n",
"___"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"button = pmui.IconButton(icon=\"favorite\", size=\"4em\", description=\"favorite\", color=\"danger\")\n",
"button"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"You can also replace the `description` with `name` to have it shown on the side."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"button = pmui.IconButton(icon=\"favorite\", size=\"4em\", label=\"favorite\")\n",
"button"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"The ``clicks`` parameter will report the number of times the button has been pressed:"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"button.clicks"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"You can `bind` to the `Button` to trigger actions when the `Button` is clicked."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"indicator = pmui.LoadingSpinner(value=False, size=25)\n",
"\n",
"def update_indicator(event):\n",
" if not event:\n",
" return\n",
" indicator.value = not indicator.value\n",
"\n",
"pn.bind(update_indicator, button, watch=True)\n",
"\n",
"pmui.Column(button, indicator)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"You can also `bind` to the `clicks` parameter"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"def handle_click(clicks):\n",
" return f'You have clicked me {clicks} times'\n",
"\n",
"pmui.Column(\n",
" button,\n",
" pn.bind(handle_click, button.param.clicks),\n",
")"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Alternatively you can use the ``on_click`` method to trigger a function when the button is clicked:"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"text = pmui.TextInput(value='Ready')\n",
"\n",
"def b(event):\n",
" text.value = 'Clicked {0} times'.format(button.clicks)\n",
" \n",
"button.on_click(b)\n",
"pmui.Row(button, text)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"By default, when `value` is `True`, the `active_icon` (`heart-filled`) is the filled version of the `icon` (`heart`).\n",
"\n",
"If you'd like this to be changed, manually set the `active_icon`.\n",
"\n",
"The icon will automatically adapt to the specified `width`/`height` but you may also provide an explicit `size`:"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"pmui.IconButton(icon=\"content_paste\", active_icon=\"check\", size=\"4em\")"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"The `toggle_duration`, in milliseconds, will determine how long the `active_icon` should be shown for and how long the button should be `disabled` for."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"pmui.IconButton(icon=\"content_paste\", active_icon=\"check\", toggle_duration=2500, size=\"4em\")"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"You can also use SVGs for icons."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"SVG = \"\"\"\n",
"\n",
"\"\"\"\n",
"ACTIVE_SVG = \"\"\"\n",
"\n",
"\"\"\"\n",
"\n",
"pmui.IconButton(icon=SVG, active_icon=ACTIVE_SVG, size='4em')"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Controls\n",
"\n",
"The `ButtonIcon` widget exposes a number of options which can be changed from both Python and Javascript. Try out the effect of these parameters interactively:"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"pmui.Row(button.controls(jslink=True), button)"
]
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 3 (ipykernel)",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.12.2"
}
},
"nbformat": 4,
"nbformat_minor": 4
}