{
"cells": [
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"import panel as pn\n",
"pn.extension()"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"The ``ToggleIcon`` widget allows toggling a single condition between `True`/`False` states. This widget is interchangeable with the `Checkbox` and `Toggle` widget.\n",
"\n",
"Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
"\n",
"#### Parameters:\n",
"\n",
"For details on other options for customizing the component see the [layout](../../how_to/layout/index.md) and [styling](../../how_to/styling/index.md) how-to guides.\n",
"\n",
"##### Core\n",
"\n",
"* **`active_icon`** (str): The name of the icon to display when toggled from [tabler-icons.io](https://tabler-icons.io)/\n",
"* **`icon`** (str): The name of the icon to display from [tabler-icons.io](https://tabler-icons.io)/ or an SVG.\n",
"* **`value`** (boolean): Whether the icon is toggled on or off\n",
"\n",
"##### Display\n",
"\n",
"* **``description``** (str | Bokeh Tooltip | pn.widgets.TooltipIcon): A description which is shown when the widget is hovered.\n",
"* **`disabled`** (boolean): Whether the widget is editable\n",
"* **`name`** (str): The title of the widget\n",
"* **`size`** (str): Optional explicit size as a CSS font-size value, e.g. '1em' or '20px'. \n",
"\n",
"___"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"toggle = pn.widgets.ToggleIcon(size=\"4em\", description=\"favorite\")\n",
"toggle"
]
},
{
"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": [
"toggle = pn.widgets.ToggleIcon(icon=\"heart\", size=\"4em\", name=\"favorite\")\n",
"toggle"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"``Toggle.value`` is either True or False depending on whether the icon is toggled:"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"toggle.value"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"The `value` can be modified by clicking the icon, or setting it explicitly."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"toggle.value = True"
]
},
{
"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`."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"pn.widgets.ToggleIcon(icon=\"thumb-down\", active_icon=\"thumb-up\")"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"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": [
"pn.widgets.ToggleIcon(icon=\"thumb-down\", active_icon=\"thumb-up\", size='3em')"
]
},
{
"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",
"pn.widgets.ToggleIcon(icon=SVG, active_icon=ACTIVE_SVG, size='3em')"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Controls\n",
"\n",
"The `ToggleIcon` 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": [
"pn.Row(toggle.controls(jslink=True), toggle)"
]
}
],
"metadata": {
"language_info": {
"name": "python",
"pygments_lexer": "ipython3"
}
},
"nbformat": 4,
"nbformat_minor": 4
}