{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "a1",
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "import panel_material_ui as pmui\n",
    "\n",
    "pn.extension()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a2",
   "metadata": {},
   "source": [
    "The `Transition` wraps a child component with a transition effect that plays when the child enters or exits. It supports multiple animation variants including fade, grow, slide, zoom, and collapse.\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",
    "* **`active`** (bool): Whether the child is shown (with transition). Set to False to animate the child out, True to animate it in. Default is True.\n",
    "* **`object`** (Viewable): The child component to wrap with the transition.\n",
    "\n",
    "##### Display\n",
    "\n",
    "* **`duration`** (int or None): The duration of the transition in milliseconds. When None, the duration is automatically calculated based on the element's size.\n",
    "* **`orientation`** (str): The orientation of the collapse transition - either 'vertical' (default) or 'horizontal'. Only applies when variant is 'collapse'.\n",
    "* **`placement`** (str): The direction the child slides in from - options are 'down', 'left' (default), 'right', and 'up'. Only applies when variant is 'slide'.\n",
    "* **`variant`** (str): The type of transition animation to apply - options are 'collapse', 'fade' (default), 'grow', 'slide', and 'zoom'.\n",
    "\n",
    "##### Styling\n",
    "\n",
    "- **`sx`** (dict): Component level styling API for advanced customization\n",
    "- **`theme_config`** (dict): Theming API for consistent design system integration\n",
    "\n",
    "___"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "b1",
   "metadata": {},
   "source": [
    "### Basic Usage\n",
    "\n",
    "Wrap any component with a transition and toggle it with `active`:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "b2",
   "metadata": {},
   "outputs": [],
   "source": [
    "toggle = pmui.Switch(value=True, label=\"Show\")\n",
    "\n",
    "transition = pmui.Transition(\n",
    "    pmui.Button(label=\"Hello\", variant=\"contained\", color=\"primary\"),\n",
    "    active=toggle,\n",
    "    variant=\"fade\",\n",
    ")\n",
    "\n",
    "pmui.Column(toggle, transition)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "c1",
   "metadata": {},
   "source": [
    "### Variants\n",
    "\n",
    "The component supports several transition types:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "c2",
   "metadata": {},
   "outputs": [],
   "source": [
    "toggle = pmui.Switch(value=True, label=\"Show\")\n",
    "\n",
    "transitions = []\n",
    "for variant in pmui.Transition.param.variant.objects:\n",
    "    t = pmui.Transition(\n",
    "        pmui.Chip(label=variant, color=\"primary\"),\n",
    "        active=toggle,\n",
    "        variant=variant,\n",
    "    )\n",
    "    transitions.append(t)\n",
    "\n",
    "pmui.Column(toggle, pmui.Row(*transitions))"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "d1",
   "metadata": {},
   "source": [
    "### Slide Direction\n",
    "\n",
    "When using the `slide` variant, control the direction with `placement`:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "d2",
   "metadata": {},
   "outputs": [],
   "source": [
    "toggle = pmui.Switch(value=True, label=\"Show\")\n",
    "\n",
    "slides = []\n",
    "for direction in pmui.Transition.param.placement.objects:\n",
    "    t = pmui.Transition(\n",
    "        pmui.Chip(label=direction, color=\"secondary\"),\n",
    "        active=toggle,\n",
    "        variant=\"slide\",\n",
    "        placement=direction,\n",
    "    )\n",
    "    slides.append(t)\n",
    "\n",
    "pmui.Column(toggle, pmui.Row(*slides))"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "e1",
   "metadata": {},
   "source": [
    "### Collapse Orientation\n",
    "\n",
    "The `collapse` variant supports both vertical and horizontal orientation:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "e2",
   "metadata": {},
   "outputs": [],
   "source": [
    "toggle = pmui.Switch(value=True, label=\"Show\")\n",
    "\n",
    "vertical = pmui.Transition(\n",
    "    pmui.Chip(label=\"Vertical\", color=\"success\"),\n",
    "    active=toggle,\n",
    "    variant=\"collapse\",\n",
    "    orientation=\"vertical\",\n",
    ")\n",
    "horizontal = pmui.Transition(\n",
    "    pmui.Chip(label=\"Horizontal\", color=\"success\"),\n",
    "    active=toggle,\n",
    "    variant=\"collapse\",\n",
    "    orientation=\"horizontal\",\n",
    ")\n",
    "\n",
    "pmui.Column(toggle, pmui.Row(vertical, horizontal))"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "f1",
   "metadata": {},
   "source": [
    "### Custom Duration\n",
    "\n",
    "Control the speed of the animation with `duration` (in milliseconds):"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "f2",
   "metadata": {},
   "outputs": [],
   "source": [
    "toggle = pmui.Switch(value=True, label=\"Show\")\n",
    "\n",
    "fast = pmui.Transition(\n",
    "    pmui.Chip(label=\"Fast (200ms)\", color=\"info\"),\n",
    "    active=toggle,\n",
    "    variant=\"zoom\",\n",
    "    duration=200,\n",
    ")\n",
    "slow = pmui.Transition(\n",
    "    pmui.Chip(label=\"Slow (2000ms)\", color=\"warning\"),\n",
    "    active=toggle,\n",
    "    variant=\"zoom\",\n",
    "    duration=2000,\n",
    ")\n",
    "\n",
    "pmui.Column(toggle, pmui.Row(fast, slow))"
   ]
  }
 ],
 "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.14.4"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}