{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# 文本区域\n",
    "\n",
    "这个元素是基于Quasar的[QInput](https://quasar.dev/vue-components/input)组件。\n",
    "\n",
    "你可以使用验证参数来定义一个验证规则的字典，例如：`{'Too long!': lambda value: len(value) < 3}`。第一个失败的规则的键将显示为错误消息。或者，你可以传递一个可调用的函数，该函数返回可选的错误消息。要禁用每次值更改时自动验证，你可以使用 `without_auto_validation` 方法。\n",
    "\n",
    "- `label`：`textarea` 的显示名称\n",
    "- `placeholder`：如果没有输入值，显示的文本\n",
    "- `value`：字段的初始值\n",
    "- `on_change`：当值发生变化时执行的回调函数\n",
    "- `validation`：验证规则的字典或返回可选错误消息的可调用对象"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "ui.textarea(label='Text', placeholder='start typing',\n",
    "            on_change=lambda e: result.set_text('you typed: ' + e.value))\n",
    "result = ui.label()\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## `clearable`\n",
    "\n",
    "`clearable` 属性是 Quasar 框架中的一个特性，它为输入框添加了一个清除按钮，用于清空文本。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<nicegui.elements.label.Label at 0x2c2b9294450>"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "i = ui.textarea(value='some text').props('clearable')\n",
    "ui.label().bind_text_from(i, 'value')\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
}