{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# 样式设计\n",
    "\n",
    "NiceGUI 使用 [Quasar 框架](https://quasar.dev/) 1.0 版本，因此具有其全部设计能力。每个 NiceGUI 元素都提供了 `props` 方法，其内容会[传递给 Quasar 组件](https://justpy.io/quasar_tutorial/introduction/#props-of-quasar-components)：请查看 [Quasar 文档](https://quasar.dev/vue-components/button#design)以获取所有样式属性。带有前导 : 的属性可以包含在客户端求值的 JavaScript 表达式。您还可以使用 `classes` 方法应用 [Tailwind CSS](https://tailwindcss.com/) 实用类。\n",
    "\n",
    "如果您确实需要应用 CSS，您可以使用 `style` 方法。这里的分隔符是 `;` 而不是空格。\n",
    "\n",
    "这三个函数还提供了 `remove` 和 `replace` 参数，以防在特定样式中不需要预定义的外观。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<nicegui.elements.label.Label at 0x196958e9a10>"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "ui.radio(['x', 'y', 'z'], value='x').props('inline color=green')\n",
    "ui.button(icon='touch_app').props('outline round').classes('shadow-lg')\n",
    "ui.label('Stylish!').style('color: #6E93D6; font-size: 200%; font-weight: 300')\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 尝试样式化 NiceGUI 元素！\n",
    "\n",
    "尝试一下 Tailwind CSS 类、Quasar 属性和 CSS 样式如何影响 NiceGUI 元素。\n",
    "\n",
    "从可用的元素中选择一个，并开始对其进行样式设计！\n",
    "```python\n",
    "from nicegui import ui\n",
    "\n",
    "element = ui.button('element')\n",
    "element.classes('\n",
    "\n",
    "')\n",
    "\n",
    "element.props('\n",
    "\n",
    "')\n",
    "\n",
    "element.style('\n",
    "\n",
    "')\n",
    "\n",
    "ui.run()\n",
    "```"
   ]
  },
  {
   "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
}