{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "a5b5692e-c760-4019-a6c7-80b555e94963",
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "from panel_material_ui import Backdrop, Button, Column\n",
    "\n",
    "pn.extension()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "986d6f98-044d-4031-9e7e-3073cd218250",
   "metadata": {},
   "source": [
    "The Backdrop signals a state change within the application and can be used for creating loaders, dialogs, and more. In its simplest form, the Backdrop component will add a dimmed layer over your application.\n",
    "\n",
    "## Parameters:\n",
    "\n",
    "### Core\n",
    "\n",
    "* **`open`** (`boolean`): Whether the backdrop is visible.\n",
    "\n",
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "147b3c7b-eec0-420c-ad5c-903489c13a2d",
   "metadata": {},
   "source": [
    "The `Backdrop` can be opened and closed programmatically by setting the `open` parameter:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "c2ac2780-ed7a-4315-b85e-4183d6a38ec2",
   "metadata": {},
   "outputs": [],
   "source": [
    "open = Button(label='Open')\n",
    "close = Button(label='Close')\n",
    "\n",
    "dialog = Backdrop(close)\n",
    "\n",
    "open.js_on_click(args={'dialog': dialog}, code=\"dialog.data.open = true\")\n",
    "close.js_on_click(args={'dialog': dialog}, code=\"dialog.data.open = false\")\n",
    "\n",
    "Column(open, dialog).preview()"
   ]
  }
 ],
 "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
}