generated from xinetzone/xbook
-
Notifications
You must be signed in to change notification settings - Fork 0
/
add-style.md
59 lines (44 loc) · 1.23 KB
/
add-style.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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
# {func}`~nicegui.ui.add_style` 向页面添加样式定义
此函数可用于将 CSS、SCSS 或 SASS 样式定义添加到 HTML 页面的头部。
- `content`:样式内容(字符串或文件路径)
- `indented`:内容是否缩进(SASS)或不缩进(SCSS/CSS)(默认:`False`)
```python
from nicegui import ui
ui.add_style('''
.red {
color: red;
}
''')
ui.label('This is red with CSS.').classes('red')
# ui.run()
```
## {func}`~nicegui.ui.add_style` 使用 SCSS 定义样式
您也可以使用 SCSS 来定义样式。
```python
from nicegui import ui
ui.add_style('''
.green {
background-color: lightgreen;
.blue {
color: blue;
}
}
''')
with ui.element().classes('green'):
ui.label('This is blue on green with SCSS.').classes('blue')
# ui.run()
```
## {func}`~nicegui.ui.add_style` 使用 SASS
您也可以通过将 `indented` 参数设置为 `True` 来使用缩进的 SASS 语法。
```python
from nicegui import ui
ui.add_style('''
.yellow
background-color: yellow
.purple
color: purple
''', indented=True)
with ui.element().classes('yellow'):
ui.label('This is purple on yellow with SASS.').classes('purple')
# ui.run()
```