{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# 对话框\n",
    "\n",
    "基于 Quasar 的 [QDialog 组件](https://quasar.dev/vue-components/dialog)创建一个对话框。默认情况下，通过点击或按 `ESC` 键可以关闭它。要使其保持打开状态，请在对话框元素上设置 `.props('persistent')`。\n",
    "\n",
    "注意：对话框是一个元素。这意味着它关闭时不会被移除，而只是隐藏。您应该只创建一次然后重复使用它，或者在关闭后使用 `.clear()` 方法将其移除。\n",
    "\n",
    "`value`：创建时应否打开对话框（默认：`False`）"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<nicegui.elements.button.Button at 0x21da8feab90>"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "with ui.dialog() as dialog, ui.card():\n",
    "    ui.label('Hello world!')\n",
    "    ui.button('Close', on_click=dialog.close)\n",
    "\n",
    "ui.button('Open a dialog', on_click=dialog.open)\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 可等待的对话框\n",
    "\n",
    "对话框可以被等待。使用 `submit` 方法关闭对话框并返回结果。通过在背景上点击或按 `ESC` 键取消对话框将返回 `None`。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<nicegui.elements.button.Button at 0x21da8018710>"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "with ui.dialog() as dialog, ui.card():\n",
    "    ui.label('Are you sure?')\n",
    "    with ui.row():\n",
    "        ui.button('Yes', on_click=lambda: dialog.submit('Yes'))\n",
    "        ui.button('No', on_click=lambda: dialog.submit('No'))\n",
    "\n",
    "async def show():\n",
    "    result = await dialog\n",
    "    ui.notify(f'You chose {result}')\n",
    "\n",
    "ui.button('Await a dialog', on_click=show)\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 替换内容\n",
    "\n",
    "对话框的内容可以被更改。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<nicegui.elements.button.Button at 0x21dbc1f1d50>"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "def replace():\n",
    "    dialog.clear()\n",
    "    with dialog, ui.card().classes('w-64 h-64'):\n",
    "        ui.label('New Content')\n",
    "    dialog.open()\n",
    "\n",
    "with ui.dialog() as dialog, ui.card():\n",
    "    ui.label('Hello world!')\n",
    "\n",
    "ui.button('Open', on_click=dialog.open)\n",
    "ui.button('Replace', on_click=replace)\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "py311",
   "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.11.7"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}