{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# 通知\n",
    "\n",
    "## 在屏幕上显示一个通知。\n",
    "\n",
    "- `message`：通知内容\n",
    "- `position`：屏幕上的位置（`\"top-left\"`、`\"top-right\"`、`\"bottom-left\"`、`\"bottom-right\"`、`\"top\"`、`\"bottom\"`、`\"left\"`、`\"right\"` 或 - - `\"center\"`，默认为 `\"bottom\"`）\n",
    "- `close_button`：可选的按钮标签，用于关闭通知（默认：`False`）\n",
    "- `type`：可选类型（`\"positive\"`、`\"negative\"`、`\"warning\"`、`\"info\"` 或 `\"ongoing\"`）\n",
    "- `color`：可选的颜色名称\n",
    "- `multi_line`：启用多行通知\n",
    "\n",
    "注意：您可以根据 Quasar 的 [Notify API](https://quasar.dev/quasar-plugins/notify#notify-api) 传递其他关键字参数。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<nicegui.elements.button.Button at 0x1f92c9c6890>"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "ui.button('Say hi!', on_click=lambda: ui.notify('Hi!', close_button='OK'))\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 通知类型\n",
    "\n",
    "可以使用不同的类型来指示通知的性质。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<nicegui.elements.button.Button at 0x1f92d311f50>"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "ui.button('negative', on_click=lambda: ui.notify('error', type='negative'))\n",
    "ui.button('positive', on_click=lambda: ui.notify('success', type='positive'))\n",
    "ui.button('warning', on_click=lambda: ui.notify('warning', type='warning'))\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 多行通知\n",
    "\n",
    "要允许通知文本跨越多行，只需设置 `multi_line=True`。如果需要手动换行符（如 `\\n`），您需要定义一个 CSS 样式，并像示例中所示将其传递给通知。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<nicegui.elements.button.Button at 0x1f92d2c6e90>"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "ui.html('<style>.multi-line-notification { white-space: pre-line; }</style>')\n",
    "ui.button('show', on_click=lambda: ui.notify(\n",
    "    'Lorem ipsum dolor sit amet, consectetur adipisicing elit. \\n'\n",
    "    'Hic quisquam non ad sit assumenda consequuntur esse inventore officia. \\n'\n",
    "    'Corrupti reiciendis impedit vel, '\n",
    "    'fugit odit quisquam quae porro exercitationem eveniet quasi.',\n",
    "    multi_line=True,\n",
    "    classes='multi-line-notification',\n",
    "))\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 通知元素\n",
    "\n",
    "在屏幕上显示一个通知。与 `ui.notify` 不同，此元素允许在通知显示后更新通知消息和其他属性。可以使用 `dismiss()` 方法移除通知。\n",
    "\n",
    "- `message`：通知内容\n",
    "- `position`：屏幕上的位置（`\"top-left\"`、`\"top-right\"`、`\"bottom-left\"`、`\"bottom-right\"`、`\"top\"`、`\"bottom\"`、`\"left\"`、`\"right\"` 或 - - `\"center\"`，默认为 `\"bottom\"`）\n",
    "- `close_button`：可选的按钮标签，用于关闭通知（默认：False）\n",
    "- `type`：可选类型（`\"positive\"`、`\"negative\"`、`\"warning\"`、`\"info\"` 或 `\"ongoing\"`）\n",
    "- `color`：可选的颜色名称\n",
    "- `multi_line`：启用多行通知\n",
    "- `icon`：可选的图标名称，以在通知中显示（默认：`None`）\n",
    "- `spinner`：在通知中显示一个旋转器（默认：`False`）\n",
    "- `timeout`：可选的超时时间（秒），在此之后通知将被移除（默认：`5.0`）\n",
    "\n",
    "注意：您可以根据 Quasar 的 [Notify API](https://quasar.dev/quasar-plugins/notify#notify-api) 传递其他关键字参数。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<nicegui.elements.button.Button at 0x1f919159a10>"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "import asyncio\n",
    "from nicegui import ui\n",
    "\n",
    "async def compute():\n",
    "    n = ui.notification(timeout=None)\n",
    "    for i in range(10):\n",
    "        n.message = f'Computing {i/10:.0%}'\n",
    "        n.spinner = True\n",
    "        await asyncio.sleep(0.2)\n",
    "    n.message = 'Done!'\n",
    "    n.spinner = False\n",
    "    await asyncio.sleep(1)\n",
    "    n.dismiss()\n",
    "\n",
    "ui.button('Compute', on_click=compute)\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
}