{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# 标签页\n",
    "\n",
    "元素 `ui.tabs`、`ui.tab`、`ui.tab_panels` 和 `ui.tab_panel` 类似于 Quasar 的[标签页](https://quasar.dev/vue-components/tabs)和[标签面板](https://quasar.dev/vue-components/tab-panels%3E) API。\n",
    "\n",
    "`ui.tabs` 创建一个容器来容纳标签页。例如，它可以放置在一个 `ui.header` 中。`ui.tab_panels` 创建一个带有实际内容的标签面板的容器。每个 `ui.tab_panel` 都与一个 `ui.tab` 元素相关联。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "with ui.tabs().classes('w-full') as tabs:\n",
    "    one = ui.tab('One')\n",
    "    two = ui.tab('Two')\n",
    "with ui.tab_panels(tabs, value=two).classes('w-full'):\n",
    "    with ui.tab_panel(one):\n",
    "        ui.label('First tab')\n",
    "    with ui.tab_panel(two):\n",
    "        ui.label('Second tab')\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 名称、标签、图标\n",
    "\n",
    "`ui.tab` 元素具有一个 `label` 属性，可用于显示与 `name` 不同的文本。`name` 也可以代替 `ui.tab` 对象，将 `ui.tab` 与 `ui.tab_panel` 关联起来。此外，每个标签页都可以有一个图标。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "with ui.tabs() as tabs:\n",
    "    ui.tab('h', label='Home', icon='home')\n",
    "    ui.tab('a', label='About', icon='info')\n",
    "with ui.tab_panels(tabs, value='h').classes('w-full'):\n",
    "    with ui.tab_panel('h'):\n",
    "        ui.label('Main Content')\n",
    "    with ui.tab_panel('a'):\n",
    "        ui.label('Infos')\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 通过编程切换标签页\n",
    "\n",
    "`ui.tabs` 和 `ui.tab_panels` 元素派生自 `ValueElement`，它具有 `set_value` 方法。可以使用该方法通过编程方式切换标签页。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<nicegui.elements.button.Button at 0x2ee72c6b090>"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "content = {'Tab 1': 'Content 1', 'Tab 2': 'Content 2', 'Tab 3': 'Content 3'}\n",
    "with ui.tabs() as tabs:\n",
    "    for title in content:\n",
    "        ui.tab(title)\n",
    "with ui.tab_panels(tabs).classes('w-full') as panels:\n",
    "    for title, text in content.items():\n",
    "        with ui.tab_panel(title):\n",
    "            ui.label(text)\n",
    "\n",
    "ui.button('GoTo 1', on_click=lambda: panels.set_value('Tab 1'))\n",
    "ui.button('GoTo 2', on_click=lambda: tabs.set_value('Tab 2'))\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 带有分隔符的垂直标签页\n",
    "\n",
    "与 [Quasar 的垂直标签页示例](https://quasar.dev/vue-components/tabs#vertical)类似，我们可以将 ui.splitter 和 tab 元素结合起来创建一个垂直标签页布局。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "with ui.splitter(value=30).classes('w-full h-56') as splitter:\n",
    "    with splitter.before:\n",
    "        with ui.tabs().props('vertical').classes('w-full') as tabs:\n",
    "            mail = ui.tab('Mails', icon='mail')\n",
    "            alarm = ui.tab('Alarms', icon='alarm')\n",
    "            movie = ui.tab('Movies', icon='movie')\n",
    "    with splitter.after:\n",
    "        with ui.tab_panels(tabs, value=mail) \\\n",
    "                .props('vertical').classes('w-full h-full'):\n",
    "            with ui.tab_panel(mail):\n",
    "                ui.label('Mails').classes('text-h4')\n",
    "                ui.label('Content of mails')\n",
    "            with ui.tab_panel(alarm):\n",
    "                ui.label('Alarms').classes('text-h4')\n",
    "                ui.label('Content of alarms')\n",
    "            with ui.tab_panel(movie):\n",
    "                ui.label('Movies').classes('text-h4')\n",
    "                ui.label('Content of movies')\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
}