{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "pn.extension()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The ``Toggle`` widget allows toggling a single condition between ``True``/``False`` states. This widget is interchangeable with the ``Checkbox`` 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.md).\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",
    "* **``value``** (boolean): Whether the button is toggled or not\n",
    "\n",
    "##### Display\n",
    "\n",
    "* **`button_style`** (str): The button style, either 'solid' or 'outline'.\n",
    "* **``button_type``** (str): A button theme should be one of ``'default'`` (white), ``'primary'`` (blue), ``'success'`` (green), ``'info'`` (yellow), or ``'danger'`` (red)\n",
    "* **`icon`** (str): An icon to render to the left of the button label. Either an SVG or an icon name which is loaded from [tabler-icons.io](https://tabler-icons.io)/.\n",
    "* **`icon_size`** (str): Size of the icon as a string, e.g. 12px or 1em.\n",
    "* **``disabled``** (boolean): Whether the widget is editable\n",
    "* **``name``** (str): The title of the widget\n",
    "\n",
    "___"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "toggle = pn.widgets.Toggle(name='Toggle', button_type='success')\n",
    "\n",
    "toggle"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "``Toggle.value`` is either True or False depending on whether the button is toggled:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "toggle.value"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Styles\n",
    "\n",
    "The color of the button can be set by selecting one of the available `button_type` values and the `button_style` can be `'solid'` or `'outline'`:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pn.Row(\n",
    "    *(pn.Column(*(pn.widgets.Toggle(name=p, button_type=p, button_style=bs) for p in pn.widgets.Toggle.param.button_type.objects))\n",
    "    for bs in pn.widgets.Toggle.param.button_style.objects)\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Icons\n",
    "\n",
    "The `Toggle` name string may contain Unicode and Emoji characters, providing a convenient way to define common graphical buttons."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "backward = pn.widgets.Toggle(name='\\u25c0', width=50)\n",
    "forward = pn.widgets.Toggle(name='\\u25b6', width=50)\n",
    "search = pn.widgets.Button(name='🔍', width=100)\n",
    "play = pn.widgets.Toggle(name=\"▶️ Play\", width=100)\n",
    "pause = pn.widgets.Toggle(name=\"Pause ⏸️\", width=100)\n",
    "\n",
    "pn.Row(backward, forward, search, play, pause)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "However you can also provide an explicit `icon`, either as a named icon loaded from [tabler-icons.io](https://tabler-icons.io)/:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pn.widgets.Toggle(icon='2fa', button_type='light', icon_size='2em')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "or as an explicit SVG:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "shuffle_icon = \"\"\"\n",
    "<svg xmlns=\"http://www.w3.org/2000/svg\" class=\"icon icon-tabler icon-tabler-arrows-shuffle\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n",
    "  <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\n",
    "  <path d=\"M18 4l3 3l-3 3\" />\n",
    "  <path d=\"M18 20l3 -3l-3 -3\" />\n",
    "  <path d=\"M3 7h3a5 5 0 0 1 5 5a5 5 0 0 0 5 5h5\" />\n",
    "  <path d=\"M21 7h-5a4.978 4.978 0 0 0 -3 1m-4 8a4.984 4.984 0 0 1 -3 1h-3\" />\n",
    "</svg>\n",
    "\"\"\"\n",
    "\n",
    "pn.widgets.Toggle(icon=shuffle_icon, button_type='success', name='Shuffle', icon_size='2em')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Controls\n",
    "\n",
    "The `Toggle` 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
}