{ "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", "* **`icon`** (str): An icon to render to the left of the button label. Either an SVG or an icon name which is loaded from 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": [ "The ``on_click`` method can trigger function when 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 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", "\n", "pn.Row(backward, forward, search)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "However you can also provide an explicit `icon`, either as a named icon loaded from 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 }