generated from xinetzone/xbook
-
Notifications
You must be signed in to change notification settings - Fork 0
/
styling.md
42 lines (25 loc) · 1.38 KB
/
styling.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
# NiceGUI 样式设计
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/) 实用类。
如果您确实需要应用 CSS,您可以使用 `style` 方法。这里的分隔符是 `;` 而不是空格。
这三个函数还提供了 `remove` 和 `replace` 参数,以防在特定样式中不需要预定义的外观。
```python
from nicegui import ui
ui.radio(['x', 'y', 'z'], value='x').props('inline color=green')
ui.button(icon='touch_app').props('outline round').classes('shadow-lg')
ui.label('Stylish!').style('color: #6E93D6; font-size: 200%; font-weight: 300')
# ui.run()
```
## 尝试样式化 NiceGUI 元素!
尝试一下 Tailwind CSS 类、Quasar 属性和 CSS 样式如何影响 NiceGUI 元素。
从可用的元素中选择一个,并开始对其进行样式设计!
```python
from nicegui import ui
element = ui.button('element')
element.classes('
')
element.props('
')
element.style('
')
ui.run()
```