{
  "cells": [
    {
      "cell_type": "code",
      "execution_count": null,
      "id": "89409adf",
      "metadata": {},
      "outputs": [],
      "source": [
        "import panel as pn\n",
        "import panel_material_ui as pmui\n",
        "\n",
        "pn.extension()"
      ]
    },
    {
      "cell_type": "markdown",
      "id": "032267a1",
      "metadata": {},
      "source": [
        "The `MultiPill` widget allows selecting multiple values 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 `MultiPill` widget falls into the broad category of multi-value, option-selection widgets that provide a compatible API and include the [`MultiSelect`](MultiSelect.ipynb), [`MultiChoice`](MultiChoice.ipynb) and [`CheckBoxGroup`](CheckBoxGroup.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",
        "* **`max_items`** (int): Maximum number of options that can be selected.\n",
        "* **`options`** (list or dict): A list or dictionary of options to select from.\n",
        "* **`value`** (list): The current list of selected values.\n",
        "\n",
        "##### Display\n",
        "\n",
        "* **`color`** (str): The color of selected pills.\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": "a704dc28",
      "metadata": {},
      "source": [
        "### Basic Usage\n",
        "\n",
        "The `MultiPill` widget allows selecting multiple options:"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "id": "20343757",
      "metadata": {},
      "outputs": [],
      "source": [
        "multipill = pmui.MultiPill(\n",
        "    label='Favourites',\n",
        "    value=['Panel', 'hvPlot'],\n",
        "    options=['Panel', 'hvPlot', 'HoloViews', 'GeoViews'],\n",
        ")\n",
        "\n",
        "multipill"
      ]
    },
    {
      "cell_type": "markdown",
      "id": "cbb5d1c6",
      "metadata": {},
      "source": [
        "### Dictionary Options\n",
        "\n",
        "Provide options as a dictionary to map labels to values:"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "id": "eff7e467",
      "metadata": {},
      "outputs": [],
      "source": [
        "pmui.MultiPill(\n",
        "    label='Grades',\n",
        "    value=['A'],\n",
        "    options={'Excellent': 'A', 'Good': 'B', 'Fair': 'C'},\n",
        ")"
      ]
    },
    {
      "cell_type": "markdown",
      "id": "82072e90",
      "metadata": {},
      "source": [
        "### Sizes\n",
        "\n",
        "Use the `size` parameter to control the chip size:"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "id": "dfe5adea",
      "metadata": {},
      "outputs": [],
      "source": [
        "pmui.FlexBox(\n",
        "    *(pmui.MultiPill(label=size, size=size, options=['One', 'Two', 'Three'], value=['Two'])\n",
        "      for size in pmui.MultiPill.param.size.objects)\n",
        ")"
      ]
    },
    {
      "cell_type": "markdown",
      "id": "564055b6",
      "metadata": {},
      "source": [
        "### Variants\n",
        "\n",
        "Choose from `filled` or `outlined` variants:"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "id": "9037c365",
      "metadata": {},
      "outputs": [],
      "source": [
        "pmui.FlexBox(\n",
        "    *(pmui.MultiPill(label=variant, variant=variant, options=['One', 'Two', 'Three'], value=['Two'])\n",
        "      for variant in pmui.MultiPill.param.variant.objects)\n",
        ")"
      ]
    },
    {
      "cell_type": "markdown",
      "id": "99d91227",
      "metadata": {},
      "source": [
        "### Colors\n",
        "\n",
        "Color is applied to the selected pills:"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "id": "15b5dd43",
      "metadata": {},
      "outputs": [],
      "source": [
        "pmui.FlexBox(\n",
        "    *(pmui.MultiPill(label=color, color=color, options=['One', 'Two'], value=['Two'])\n",
        "      for color in pmui.MultiPill.param.color.objects)\n",
        ")"
      ]
    },
    {
      "cell_type": "markdown",
      "id": "2e9cf613",
      "metadata": {},
      "source": [
        "### Disabled and Disabled Options\n",
        "\n",
        "Disable the whole widget or individual options:"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "id": "1995b85d",
      "metadata": {},
      "outputs": [],
      "source": [
        "pmui.Column(\n",
        "    pmui.MultiPill(label='Disabled', options=['One', 'Two', 'Three'], value=['Two'], disabled=True),\n",
        "    pmui.MultiPill(label='Disabled option', options=['One', 'Two', 'Three'], value=['Two'], disabled_options=['Two']),\n",
        ")"
      ]
    },
    {
      "cell_type": "markdown",
      "id": "41d0138e",
      "metadata": {},
      "source": [
        "Limit the number of selected pills with `max_items`:"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "id": "9fb6080b",
      "metadata": {},
      "outputs": [],
      "source": [
        "pmui.MultiPill(\n",
        "    label='Top 2',\n",
        "    value=['Python'],\n",
        "    options=['Python', 'JavaScript', 'Rust', 'Go'],\n",
        "    max_items=2,\n",
        ")"
      ]
    },
    {
      "cell_type": "markdown",
      "id": "4c6a6b53",
      "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": "65079d0c",
      "metadata": {},
      "outputs": [],
      "source": [
        "pmui.MultiPill(\n",
        "    label=\"Modes :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": "d7f2ee97",
      "metadata": {},
      "source": [
        "### Controls\n",
        "\n",
        "The `MultiPill` 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": "648d091d",
      "metadata": {},
      "outputs": [],
      "source": [
        "pmui.Row(multipill.controls(jslink=True), multipill)"
      ]
    }
  ],
  "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
}