{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "d6f0840e",
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "import panel_material_ui as pmui\n",
    "\n",
    "pn.extension()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "74142db3",
   "metadata": {},
   "source": [
    "The `FloatPanel` layout displays content in a movable Material UI `Paper` surface. By default it floats within its parent; set `contained=False` to anchor it to the browser viewport. Drag the title bar or empty surface to move it without moving widgets inside.\n",
    "\n",
    "## Parameters\n",
    "\n",
    "### Position and content\n",
    "\n",
    "* **`contained`** (`bool`): Position the panel within its parent (`True`, the default) or the viewport (`False`).\n",
    "* **`position`** (`str`): Initial anchor, default `\"right-top\"`. Options: `\"center\"`, `\"left-top\"`, `\"center-top\"`, `\"right-top\"`, `\"right-center\"`, `\"right-bottom\"`, `\"center-bottom\"`, `\"left-bottom\"`, and `\"left-center\"`.\n",
    "* **`offsetx`**, **`offsety`** (`int`): Pixel offsets from the selected anchor, default 0. Change the anchor or offsets to reset a panel after it has been dragged.\n",
    "* **`status`** (`str`): `\"normalized\"` (default), `\"maximized\"`, `\"minimized\"`, `\"smallified\"`, `\"smallifiedmax\"`, or `\"closed\"`. The title-bar buttons update this parameter.\n",
    "* **`controls`** (`list[str]`): Title-bar actions to show, selected from `\"minimize\"`, `\"maximize\"`, and `\"close\"`. All three are shown by default; use `[]` to hide them all.\n",
    "* **`objects`** (`list`): Panel or Material UI components displayed inside the surface. Like other list-like layouts, `FloatPanel` accepts positional children and supports `append`, `extend`, and `clear`.\n",
    "\n",
    "### Appearance\n",
    "\n",
    "* **`elevation`** (`int`): Shadow depth of the surface when `variant=\"elevation\"`; defaults to 1.\n",
    "* **`variant`** (`\"elevation\"` or `\"outlined\"`): Use a shadow or an outline; defaults to `\"elevation\"`.\n",
    "* **`square`** (`bool`): Remove the rounded corners; defaults to `False`.\n",
    "* **`sx`** (`dict`): Material UI style overrides applied to the Paper surface.\n",
    "\n",
    "See the [styling guide](https://panel-material-ui.holoviz.org/how_to/customize_themes_and_styles.html) for more ways to customize Material UI components."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "ede5ae7e",
   "metadata": {},
   "source": [
    "### Floating controls\n",
    "\n",
    "Pass widgets as positional children or through `objects`. Drag the title bar or padding around these controls; the rating and button remain interactive. This example floats over the page content."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "e52805a5",
   "metadata": {},
   "outputs": [],
   "source": [
    "controls = pmui.FloatPanel(\n",
    "    pmui.Rating(value=3, size=\"small\"),\n",
    "    pmui.Button(label=\"Submit\", on_click=lambda event: print(\"Submitted\")),\n",
    "    name=\"Feedback\", contained=False, position=\"left-top\", offsetx=24, offsety=80,\n",
    "    elevation=4,\n",
    ")\n",
    "\n",
    "pmui.Page(title=\"Floating controls\", main=[\"# Try dragging the panel\", controls]).preview()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "8b616a2d",
   "metadata": {},
   "source": [
    "### Positioning\n",
    "\n",
    "`position` selects one of nine anchors relative to the parent (`contained=True`) or the viewport (`contained=False`). `offsetx` and `offsety` add spacing from that anchor. A viewport panel stays put as the page scrolls. A contained panel needs space from its parent layout, for example a `Column` with an explicit height.\n",
    "\n",
    "Focus the surface with Tab and use the arrow keys to move it in 10-pixel steps. Dragging changes its browser position; it does not change the named `position` anchor in Python. Assign a new anchor or offset to reposition it programmatically."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "68799458",
   "metadata": {},
   "outputs": [],
   "source": [
    "positioned = pmui.FloatPanel(\"Move me within the box\", name=\"Contained panel\",\n",
    "                             position=\"center\", sx={\"p\": 2})\n",
    "\n",
    "pmui.Column(positioned, width=450, height=280, sx={\"border\": \"1px dashed\"})"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "27f8b5dd",
   "metadata": {},
   "source": [
    "### Elevation and variants\n",
    "\n",
    "Like `Paper`, the default `elevation` variant uses a shadow to separate the surface from the page. A higher `elevation` makes the shadow stronger. Use `variant=\"outlined\"` for a flat surface with a border instead. `square=True` removes the rounded corners. These options follow the active Material UI theme, including dark mode. Drag the bottom-right 16-pixel corner to resize a normalized panel. Resizing stays within the parent or viewport and does not change Python's `width` and `height` parameters."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "4c8c914a",
   "metadata": {},
   "outputs": [],
   "source": [
    "shadow = pmui.FloatPanel(\"Elevated surface\", name=\"Shadow\", elevation=8,\n",
    "                         position=\"left-center\", offsetx=20)\n",
    "outline = pmui.FloatPanel(\n",
    "    \"Outlined, square surface\", name=\"Outline\", variant=\"outlined\", square=True,\n",
    "    position=\"right-center\", offsetx=20,\n",
    ")\n",
    "\n",
    "pmui.Column(shadow, outline, width=560, height=300, sx={\"border\": \"1px dashed\"})"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "374718ea",
   "metadata": {},
   "source": [
    "### Window controls\n",
    "\n",
    "The title bar shows the panel's `name` and buttons to minimize, maximize, restore, and close it. These controls update `status` in Python; set `status=\"normalized\"` to reopen a closed panel. A minimized panel retains its title bar so it can be restored. Set `controls=[\"minimize\", \"maximize\"]` to omit the close button, or `controls=[]` to omit all actions."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "f1f1e57f",
   "metadata": {},
   "outputs": [],
   "source": [
    "window = pmui.FloatPanel(\"Try the window controls\", name=\"Window states\",\n",
    "                         contained=False, position=\"center\", controls=[\"minimize\", \"maximize\"])\n",
    "\n",
    "pmui.Page(title=\"Window controls\", main=[window]).preview()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "62963653",
   "metadata": {},
   "source": [
    "### Updating the contents\n",
    "\n",
    "`FloatPanel` uses the same list-like API as other Material UI layouts. Add a component with `append`, replace `objects`, or call `clear` to remove them. In a live server app, calling `actions.append(...)` again updates the displayed panel without recreating it."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "6b14af25",
   "metadata": {},
   "outputs": [],
   "source": [
    "actions = pmui.FloatPanel(pmui.Button(label=\"First action\"), name=\"Actions\",\n",
    "                          position=\"center\")\n",
    "actions.append(pmui.Button(label=\"Second action\"))\n",
    "\n",
    "pmui.Column(actions, width=450, height=280, sx={\"border\": \"1px dashed\"})"
   ]
  }
 ],
 "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
}