{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "55e7b392-14c0-4411-bfcf-a46e7e117368",
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "import panel_material_ui as pmui\n",
    "\n",
    "pn.extension()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a1183801-6081-4061-8795-d7fd8e5e8f38",
   "metadata": {},
   "source": [
    "The `SpeedDial` component is part of the `Menu` family of components. `Menu` components provide a structured way for users to navigate or choose between a series of defined items. In the case of `SpeedDial`, these items represent a series of menu options.\n",
    "\n",
    "Each item in the `SpeedDial` list is defined by a dictionary with several supported keys:\n",
    "\n",
    "## Item Structure\n",
    "\n",
    "Each item can include the following keys:\n",
    "\n",
    "- **`label`** (str, required): The text displayed for the breadcrumb item.\n",
    "- **`icon`** (str, optional): An icon to display next to the label.\n",
    "- **`avatar`** (str, optional): An avatar or image to show beside the label.\n",
    "- **`secondary`** (str, optional): The secondary text, e.g. for describing the item.\n",
    "- **`color`** (str, optional): The color of the list item\n",
    "\n",
    "These dictionaries are passed to the component via the items parameter as a list. When one of the `items` is selected it will be available on the `value` parameter.\n",
    "\n",
    "Since only the allowed keys are synced with the frontend, other information can be stored in the item dictionaries.\n",
    "\n",
    "## Parameters:\n",
    "\n",
    "### Core\n",
    "\n",
    "* **`active`** (`int`): The index of the selected item.\n",
    "* **`disabled`** (`boolean`): Whether the menu is disabled.\n",
    "* **`items`** (`list`): Menu items to select from.\n",
    "* **`value`** (`dict`): The currently selected item.\n",
    "\n",
    "##### Display\n",
    "\n",
    "* **`color`** (`str`): The color variant of the dial, which must be one of `'default'` (white), `'primary'` (blue), `'success'` (green), `'info'` (yellow), `'light'` (light), or `'danger'` (red).\n",
    "* **`direction`** (`Literal[\"right\", \"left\", \"up\", \"down\"]`): The direction the menu opens in.\n",
    "* **`icon`** (`str`): The icon to display when the menu is closed.\n",
    "* **`open_icon`** (`str`): The icon to display when the menu is open.\n",
    "\n",
    "##### Styling\n",
    "\n",
    "- **`sx`** (`dict`): Component level styling API.\n",
    "- **`theme_config`** (`dict`): Theming API.\n",
    "\n",
    "---"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "ddb562b1-17a4-4ecb-91b5-c52f351f9c8e",
   "metadata": {},
   "outputs": [],
   "source": [
    "speed_dial = pmui.SpeedDial(items=[\n",
    "    {'label': 'Camera', 'icon': 'camera'},\n",
    "    {'label': 'Photos', 'icon': 'photo'},\n",
    "    {'label': 'Documents', 'icon': 'article'},\n",
    "], active=2, margin=(50, 20))\n",
    "\n",
    "speed_dial"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "666ef005-d429-491f-9fcc-3466c2ed6f6b",
   "metadata": {},
   "source": [
    "Clicking on a particular item will highlight it and set both `active` and `value` parameters:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "efca39b8-b9c0-4398-8d75-ed9888617892",
   "metadata": {},
   "outputs": [],
   "source": [
    "speed_dial.value"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "07e1ec7e-fba6-4ff2-b3ce-4a7201475913",
   "metadata": {},
   "source": [
    "## Display Options"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a1e865ac-a2ac-4c3f-ac23-542c8cfaa6b7",
   "metadata": {},
   "source": [
    "### `color`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "07e84dc1-1d00-4c35-93ae-05981c707f08",
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.Row(*(\n",
    "    speed_dial.clone(color=color)\n",
    "    for color in pmui.SpeedDial.param.color.objects\n",
    "))"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "d286425b-3555-4ff7-a76e-d034645a5a63",
   "metadata": {},
   "source": [
    "### `direction`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "d4d7378d-24e2-4304-8a82-f220d7929f5b",
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.Row(*(\n",
    "    speed_dial.clone(direction=direction)\n",
    "    for direction in pmui.SpeedDial.param.direction.objects\n",
    "))"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "87c01e9f-1f8b-49c3-92a9-77f67245cd2c",
   "metadata": {},
   "source": [
    "### `persistent_tooltips`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "d3a5a7c8-2657-45a5-aa6e-71f434ee2be0",
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.Column(speed_dial.clone(persistent_tooltips=True, direction='down', margin=(20, 180)), height=260)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "5bbc97f8-f668-45ec-af1e-cf940029769c",
   "metadata": {},
   "source": [
    "### API Reference\n",
    "\n",
    "#### Parameters\n",
    "\n",
    "The `SpeedDial` 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": "b41be92c-9ea3-48d2-8821-84062f4975f8",
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.SpeedDial(items=[\n",
    "    {'label': 'Open', 'icon': 'description'},\n",
    "    {'label': 'Save', 'icon': 'save'},\n",
    "    {'label': 'Exit', 'icon': 'close'},\n",
    "], label='File').api(jslink=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "c88a00da-73c0-49f2-b74f-56d34fadb064",
   "metadata": {},
   "source": [
    "### References\n",
    "\n",
    "**Panel Documentation:**\n",
    "\n",
    "- [How-to guides on interactivity](https://panel.holoviz.org/how_to/interactivity/index.html) - Learn how to add interactivity to your applications using widgets\n",
    "- [Setting up callbacks and links](https://panel.holoviz.org/how_to/links/index.html) - Connect parameters between components and create reactive interfaces\n",
    "- [Declarative UIs with Param](https://panel.holoviz.org/how_to/param/index.html) - Build parameter-driven applications\n",
    "\n",
    "**Material UI SpeedDial:**\n",
    "\n",
    "- [Material UI SpeedDial Reference](https://mui.com/material-ui/react-speed-dial) - Complete documentation for the underlying Material UI component\n",
    "- [Material UI SpeedDial API](https://mui.com/material-ui/api/speed-dial/) - Detailed API reference and configuration options"
   ]
  }
 ],
 "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
}