{ "cells": [ { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "import panel as pn\n", "pn.extension()" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "The ``Button`` widget allows triggering events when the button is clicked. In addition to a value parameter, which will toggle 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", "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", "* **``clicks``** (int): Number of clicks (can be listened to)\n", "* **``value``** (boolean): Toggles from `False` to `True` while the event is being processed.\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), ``'light'`` (light), or ``'danger'`` (red).\n", "* **``description``** (str | Bokeh Tooltip | pn.widgets.TooltipIcon): A description which is shown when the widget is hovered.\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": [ "button = pn.widgets.Button(name='Click me', button_type='primary')\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 = pn.indicators.LoadingSpinner(value=False, size=25)\n", "\n", "def update_indicator(event):\n", " if not event:\n", " return\n", " \n", " indicator.value = not indicator.value\n", "\n", "pn.bind(update_indicator, button, watch=True)\n", "\n", "pn.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", "pn.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 = pn.widgets.TextInput(value='Ready')\n", "\n", "def b(event):\n", " text.value = 'Clicked {0} times'.format(button.clicks)\n", " \n", "button.on_click(b)\n", "pn.Row(button, text)" ] }, { "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.Button(name=p, button_type=p, button_style=bs) for p in pn.widgets.Button.param.button_type.objects))\n", " for bs in pn.widgets.Button.param.button_style.objects)\n", ")" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Icons\n", "\n", "The ``Button`` 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.Button(name='\\u25c0', width=50)\n", "forward = pn.widgets.Button(name='\\u25b6', width=50)\n", "search = pn.widgets.Button(name='🔍', width=100)\n", "save = pn.widgets.Button(name=\"💾 Save\", width=100)\n", "copy = pn.widgets.Button(name=\"Copy ✂️\", width=100)\n", "\n", "pn.Row(backward, forward, search, save, copy)" ] }, { "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.Row(\n", " pn.widgets.Button(icon='alert-triangle-filled', button_type='warning', name='WARNING'),\n", " pn.widgets.Button(icon='bug', button_type='danger', name='Error')\n", ")" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "or as an explicit SVG:" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "cash_icon = \"\"\"\n", "\n", " \n", " \n", " \n", " \n", "\n", "\"\"\"\n", "\n", "pn.widgets.Button(icon=cash_icon, button_type='success', name='Checkout', icon_size='2em')" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Controls\n", "\n", "The `Button` 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(button.controls, button)" ] } ], "metadata": { "language_info": { "name": "python", "pygments_lexer": "ipython3" } }, "nbformat": 4, "nbformat_minor": 4 }