{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# `ui.expansion`\n",
    "\n",
    "## 扩展元素\n",
    "\n",
    "基于 Quasar 的 [QExpansionItem](https://quasar.dev/vue-components/expansion-item) 组件，提供了一个可展开的容器。\n",
    "\n",
    "- `text`：标题文字\n",
    "- `caption`：可选的副标题（或子标签）文字\n",
    "- `icon`：可选的图标（默认：`None`）\n",
    "- `group`：可选的组名，用于在组内协调打开/关闭状态，也称为“手风琴模式”\n",
    "- `value`：创建时是否应展开扩展（默认：`False`）\n",
    "- `on_value_change`：值改变时要执行的回调函数"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "with ui.expansion('Expand!', icon='work').classes('w-full'):\n",
    "    ui.label('inside the expansion')\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 带有自定义表头的扩展\n",
    "\n",
    "除了设置纯文本标题，您还可以通过将 UI 元素添加到 `\"header\"` 插槽中来填充扩展表头。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "with ui.expansion() as expansion:\n",
    "    with expansion.add_slot('header'):\n",
    "        ui.image('https://nicegui.io/logo.png').classes('w-16')\n",
    "    ui.label('What a nice GUI!')\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 带有自定义副标题的扩展\n",
    "\n",
    "可以在标题下方添加副标题或子标签。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "with ui.expansion('Expand!', caption='Expansion Caption').classes('w-full'):\n",
    "    ui.label('inside the expansion')\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 带有分组的扩展\n",
    "\n",
    "可以定义一个扩展组，以启用协调的打开/关闭状态，也称为“手风琴模式”。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "with ui.expansion(text='Expand One!', group='group'):\n",
    "    ui.label('inside expansion one')\n",
    "with ui.expansion(text='Expand Two!', group='group'):\n",
    "    ui.label('inside expansion two')\n",
    "with ui.expansion(text='Expand Three!', group='group'):\n",
    "    ui.label('inside expansion three')\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "\n"
   ]
  }
 ],
 "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
}