{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# 选项\n",
    "\n",
    "## 下拉选择\n",
    "\n",
    "这个元素是基于Quasar的[QSelect](https://quasar.dev/vue-components/select)组件。"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "`options` 可以指定为值的列表，或者作为映射值到标签的字典。在操作选项后，调用 `update()` 来更新UI中的选项。\n",
    "\n",
    "如果 `with_input` 为 `True`，则会显示一个输入字段来过滤选项。\n",
    "\n",
    "如果 `new_value_mode` 不为 `None`，则意味着 `with_input=True`，用户可以在输入字段中输入新值。有关详细信息，请参见 [Quasar 的文档](https://quasar.dev/vue-components/select#the-new-value-mode-prop)。请注意，当通过编程方式设置 `value` 属性时，此模式无效。\n",
    "\n",
    "您可以使用 `validation` 参数定义验证规则的字典，例如 `{'Too long!': lambda value: len(value) < 3}`。第一个失败的规则的键将显示为错误消息。或者，您可以传递一个返回可选错误消息的可调用对象。要禁用每次值更改时的自动验证，您可以使用 `without_auto_validation` 方法。"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "- `options`：一个列表 `['value1', ...]` 或字典 `{'value1':'label1', ...}` 指定选项\n",
    "- `label`：显示在选择上方的标签\n",
    "- `value`：初始值\n",
    "- `on_change`：选择改变时执行的回调函数\n",
    "- `with_input`：是否显示输入字段来过滤选项\n",
    "- `new_value_mode`：处理用户输入的新值（默认为None，即不允许新值）\n",
    "- `multiple`：是否允许多选\n",
    "- `clearable`：是否添加一个按钮来清除选择\n",
    "- `validation`：验证规则的字典或返回可选错误消息的可调用对象\n",
    "- `key_generator`：用于生成新值字典键的回调函数或迭代器"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "select1 = ui.select([1, 2, 3], value=1)\n",
    "select2 = ui.select({1: 'One', 2: 'Two', 3: 'Three'}).bind_value(select1, 'value')\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 边输入边搜索\n",
    "您可以激活 `with_input` 以获取带有自动补全功能的文本输入。您在输入时，选项将被过滤。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<nicegui.elements.select.Select at 0x2c920259cd0>"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "continents = [\n",
    "    'Asia',\n",
    "    'Africa',\n",
    "    'Antarctica',\n",
    "    'Europe',\n",
    "    'Oceania',\n",
    "    'North America',\n",
    "    'South America',\n",
    "]\n",
    "ui.select(options=continents, with_input=True,\n",
    "          on_change=lambda e: ui.notify(e.value)).classes('w-40')\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 多选\n",
    "您可以激活 `multiple` 以允许选择多个项目。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<nicegui.elements.select.Select at 0x2c92025f5d0>"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "names = ['Alice', 'Bob', 'Carol']\n",
    "ui.select(names, multiple=True, value=names[:2], label='comma-separated') \\\n",
    "    .classes('w-64')\n",
    "ui.select(names, multiple=True, value=names[:2], label='with chips') \\\n",
    "    .classes('w-64').props('use-chips')\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 更新选项\n",
    "选项可以通过 `options` 属性进行更改。但之后您还需要调用 `update()` 以使更改生效。`set_options` 是一个快捷方式，可以同时完成这两个操作，并且对于 `lambda` 函数来说效果很好。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "select = ui.select([1, 2, 3], value=1)\n",
    "with ui.row():\n",
    "    ui.button('4, 5, 6', on_click=lambda: select.set_options([4, 5, 6], value=4))\n",
    "    ui.button('1, 2, 3', on_click=lambda: select.set_options([1, 2, 3], value=1))\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
}