{
  "cells": [
    {
      "cell_type": "code",
      "execution_count": null,
      "id": "9341a2b3",
      "metadata": {},
      "outputs": [],
      "source": [
        "import panel as pn\n",
        "import panel_material_ui as pmui\n",
        "\n",
        "pn.extension()"
      ]
    },
    {
      "cell_type": "markdown",
      "id": "0069cf0b",
      "metadata": {},
      "source": [
        "The `Pill` widget allows selecting a single value from a list or dictionary of `options` rendered as clickable pills. It is built on top of the [Material UI Chip](https://mui.com/material-ui/react-chip/) component.\n",
        "\n",
        "The `Pill` widget falls into the broad category of single-value, option-selection widgets that provide a compatible API and include the [`Select`](Select.ipynb), [`AutocompleteInput`](AutocompleteInput.ipynb) and [`RadioButtonGroup`](RadioButtonGroup.ipynb) widgets.\n",
        "\n",
        "Discover more about using widgets to add interactivity to your applications in the [Make your component interactive](https://panel.holoviz.org/how_to/interactivity/index.html) guide. For linking or callbacks, see the [Links](https://panel.holoviz.org/how_to/links/index.html) and [Param](https://panel.holoviz.org/how_to/param/index.html) guides.\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",
        "* **`disabled`** (boolean): Whether the widget is editable.\n",
        "* **`disabled_options`** (list): Optional list of `options` that are disabled.\n",
        "* **`options`** (list or dict): A list or dictionary of options to select from.\n",
        "* **`value`** (object): The current value; must be one of the option values.\n",
        "\n",
        "##### Display\n",
        "\n",
        "* **`color`** (str): The color of the selected pill.\n",
        "* **`label`** (str): The title of the widget.\n",
        "* **`size`** (str): One of small, medium (default), or large.\n",
        "* **`variant`** (str): One of filled or outlined (default).\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": "markdown",
      "id": "8975264a",
      "metadata": {},
      "source": [
        "### Basic Usage\n",
        "\n",
        "The `Pill` widget allows selecting a single option:"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "id": "10465b26",
      "metadata": {},
      "outputs": [],
      "source": [
        "pill = pmui.Pill(label='Study', options=['Biology', 'Chemistry', 'Physics'], width=200)\n",
        "\n",
        "pill.show()"
      ]
    },
    {
      "cell_type": "markdown",
      "id": "f2ba056d",
      "metadata": {},
      "source": [
        "The `options` parameter also accepts a dictionary where keys are labels:"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "id": "fe5247e9",
      "metadata": {},
      "outputs": [],
      "source": [
        "pmui.Pill(label='Age', options={'Ten': 10, 'Twenty': 20, 'Thirty': 30})"
      ]
    },
    {
      "cell_type": "markdown",
      "id": "c2a22d87",
      "metadata": {},
      "source": [
        "### Sizes\n",
        "\n",
        "Use the `size` parameter to control the chip size:"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "id": "ab87c2b7",
      "metadata": {},
      "outputs": [],
      "source": [
        "pmui.FlexBox(\n",
        "    *(pmui.Pill(label=size, size=size, options=['One', 'Two', 'Three'], value='Two')\n",
        "      for size in pmui.Pill.param.size.objects)\n",
        ")"
      ]
    },
    {
      "cell_type": "markdown",
      "id": "c0abfe27",
      "metadata": {},
      "source": [
        "### Variants\n",
        "\n",
        "Choose from `filled` or `outlined` variants:"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "id": "ac5b211b",
      "metadata": {},
      "outputs": [],
      "source": [
        "pmui.FlexBox(\n",
        "    *(pmui.Pill(label=variant, variant=variant, options=['One', 'Two', 'Three'], value='Two')\n",
        "      for variant in pmui.Pill.param.variant.objects)\n",
        ")"
      ]
    },
    {
      "cell_type": "markdown",
      "id": "9df6e85b",
      "metadata": {},
      "source": [
        "### Colors\n",
        "\n",
        "Color is applied to the selected pill:"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "id": "b97f461b",
      "metadata": {},
      "outputs": [],
      "source": [
        "pmui.FlexBox(\n",
        "    *(pmui.Pill(label=color, color=color, options=['One', 'Two'], value='Two')\n",
        "      for color in pmui.Pill.param.color.objects)\n",
        ")"
      ]
    },
    {
      "cell_type": "markdown",
      "id": "3844cab6",
      "metadata": {},
      "source": [
        "### Disabled and Disabled Options\n",
        "\n",
        "Disable the whole widget or individual options:"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "id": "694434ae",
      "metadata": {},
      "outputs": [],
      "source": [
        "pmui.Column(\n",
        "    pmui.Pill(label='Disabled', options=['One', 'Two', 'Three'], value='Two', disabled=True),\n",
        "    pmui.Pill(label='Disabled option', options=['One', 'Two', 'Three'], value='Two', disabled_options=['Two']),\n",
        ")"
      ]
    },
    {
      "cell_type": "markdown",
      "id": "c393a8fc",
      "metadata": {},
      "source": [
        "### Icon Labels\n",
        "\n",
        "Material icon tokens like `:material/zoom_out_map:` render as icons in labels and option labels."
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "id": "9e1d2e5b",
      "metadata": {},
      "outputs": [],
      "source": [
        "pmui.Pill(\n",
        "    label=\"Mode :material/zoom_out_map:\",\n",
        "    options={\n",
        "        \"Zoom :material/zoom_out_map:\": \"zoom\",\n",
        "        \"Explore :material/explore:\": \"explore\",\n",
        "    },\n",
        "    value=\"zoom\",\n",
        ")\n"
      ]
    },
    {
      "cell_type": "markdown",
      "id": "92635c47",
      "metadata": {},
      "source": [
        "### Controls\n",
        "\n",
        "The `Pill` 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,
      "id": "51f3e60b",
      "metadata": {},
      "outputs": [],
      "source": [
        "pmui.Row(pill.controls(jslink=True), pill)"
      ]
    }
  ],
  "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": 5
}