{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "import panel_material_ui as pmui\n",
    "\n",
    "pn.extension()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The `TabMenu` 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 `TabMenu`, these items represent different tabs that allow users to switch between views or sections.\n",
    "\n",
    "Each item in the `TabMenu` 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 tab item.\n",
    "- **`href`** (str, optional): A URL to link to. If provided, the tab becomes a link.\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",
    "- **`target`** (str, optional): A URL target. If provided, the tab becomes a link with the specified target.\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 currently selected tab.\n",
    "* **`items`** (`list`): List of menu items.\n",
    "* **`value`** (dict): The currently selected item.\n",
    "\n",
    "##### Display\n",
    "\n",
    "* **`color`** (str): The color variant of the tabs, which must be one of `'default'` (white), `'primary'` (blue), `'success'` (green), `'info'` (yellow), `'light'` (light), or `'danger'` (red).\n",
    "* **`centered`** (bool): Whether the tabs should be centered.\n",
    "* **`icon_position`** (str): Position of the tab icon relative to the label, one of `'start'`, `'end'`, `'top'`, and `'bottom'`\n",
    "* **`scroll_buttons`** (str): Determine behavior of scroll buttons, one of `'auto'`, `'true'`, or `'false'`.\n",
    "* **`variant`** (str): The variant of the tabs, one of `'standard'`, `'scrollable'`, or `'fullWidth'`.\n",
    "\n",
    "##### Styling\n",
    "\n",
    "- **`sx`** (dict): Component level styling API.\n",
    "- **`theme_config`** (dict): Theming API.\n",
    "\n",
    "#### Methods\n",
    "\n",
    "- **`on_click`**: Registers a callback to be executed when a tab is clicked.\n",
    "- **`remove_on_click`**: Removes a callback that was previously registered.\n",
    "\n",
    "\n",
    "---\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Basic Usage\n",
    "\n",
    "`TabMenu` like all menu components allows selecting between a number of `items` defined as dictionaries in a list:\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "items = [\n",
    "    {'label': 'Home', 'icon': 'home'},\n",
    "    {'label': 'Gallery', 'icon': 'image'},\n",
    "    {'label': 'Settings', 'icon': 'settings'},\n",
    "    {'label': 'About', 'icon': 'info'},\n",
    "]\n",
    "\n",
    "tab_menu = pmui.TabMenu(items=items, active=0)\n",
    "\n",
    "tab_menu"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The items require a label but may also include other information including an `icon` or `avatar` and `href` and `target` value to declare a link.\n",
    "\n",
    "Clicking on a particular item will highlight it and set both `active` and `value` parameters:\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "print(f'Active: {tab_menu.active}')\n",
    "print(f'Value: {tab_menu.value}')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Alternatively you may also register `on_click` handlers:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "row = pmui.Column('# Click Events')\n",
    "\n",
    "tab_menu.on_click(row.append)\n",
    "\n",
    "row"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Try clicking on the `TabMenu` and see the clicked `item` appear.\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Custom Item Keys\n",
    "\n",
    "Like all menus the `items` only sync the allowed keys. This means you can easily store other information in the items, e.g. you can use it to easily select between different views to be displayed:\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "tab_menu = pmui.TabMenu(\n",
    "    items=[\n",
    "        {'label': 'Kingdom', 'icon': 'castle', 'view': pmui.Typography('# 🏰 Welcome to the Kingdom')},\n",
    "        {'label': 'Enchanted Forest', 'icon': 'forest', 'view': pmui.Typography('# 🌲 You enter the Enchanted Forest...')},\n",
    "        {'label': 'Dragon\\'s Lair', 'icon': 'local_fire_department', 'view': pmui.Typography('# 🐉 Beware! You approach the Dragon\\'s Lair.')},\n",
    "        {'label': 'Treasure Room', 'icon': 'diamond', 'view': pmui.Typography('# 💎 Congratulations! You found the Treasure.')},\n",
    "    ],\n",
    "    active=0,  # Start at the beginning of the journey\n",
    "    color='warning'\n",
    ")\n",
    "\n",
    "pn.Column(\n",
    "    tab_menu,\n",
    "    tab_menu.rx()['view']\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "In the above example we take advantage of the fact that `Widget.rx()` returns a reactive reference to the `value` parameter and then access the `view` on that item. Rendering this expression allows us to control the current view with the menu.\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Centered\n",
    "\n",
    "The `centered` parameter can be used to center the tabs:\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.TabMenu(items=items, active=0, centered=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Color Options\n",
    "\n",
    "The `color` parameter may be used to visually distinguish the selected tab. Available options include \"default\", \"primary\", \"secondary\", \"error\", \"info\", \"success\", \"warning\", \"light\", \"dark\", and \"danger\":\n",
    "\n",
    "The `color` of the selected tab can be set:\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.FlexBox(*(\n",
    "    pmui.TabMenu(items=items, color=color, active=0, margin=10) for color in pmui.TabMenu.param.color.objects\n",
    "))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Icon Position\n",
    "\n",
    "The `icon_position` allows changing where to place the icon relative to the label:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.FlexBox(*(\n",
    "    pmui.TabMenu(items=items, icon_position=icon_position, active=0, margin=10) for icon_position in pmui.TabMenu.param.icon_position.objects\n",
    "))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### API Reference\n",
    "\n",
    "#### Parameters\n",
    "\n",
    "The `TabMenu` menu exposes a number of options which can be changed from both Python and Javascript. Try out the effect of these parameters interactively:\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.TabMenu(items=[\n",
    "    {'label': 'Home', 'icon': 'home'},\n",
    "    {'label': 'Gallery', 'icon': 'image'},\n",
    "    {'label': 'Settings', 'icon': 'settings'},\n",
    "    {'label': 'About', 'icon': 'info'},\n",
    "]).api(jslink=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "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 Tabs:**\n",
    "\n",
    "- [Material UI Tabs Reference](https://mui.com/material-ui/react-tabs) - Complete documentation for the underlying Material UI component\n",
    "- [Material UI Tabs API](https://mui.com/material-ui/api/tabs/) - Detailed API reference and configuration options\n"
   ]
  }
 ],
 "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": 4
}