generated from xinetzone/xbook
-
Notifications
You must be signed in to change notification settings - Fork 0
/
icon.md
85 lines (55 loc) · 3.05 KB
/
icon.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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
# {func}`nicegui.ui.icon` [图标](https://nicegui.io/documentation/icon)
此元素基于Quasar的[QIcon](https://quasar.dev/vue-components/icon)组件。
[这里](https://fonts.google.com/icons?icon.set=Material+Icons)是可能名称的参考。
- `name`:图标的名称(snake 命名,例如 `add_circle`)
- `size`:CSS 单位中的大小,包括单位名称或标准大小名称(`xs|sm|md|lg|xl`),示例:`16px, 2rem`
- `color`:图标颜色(可以是 Quasar、Tailwind 或 CSS 颜色,或者是 `None`,默认值:`None`)
```python
from nicegui import ui
ui.icon('thumb_up', color='primary').classes('text-5xl')
# ui.run()
```
## {func}`nicegui.ui.icon` 材料图标和符号
您可以使用不同集合的材料图标和符号。[Quasar文档](https://quasar.dev/vue-components/icon#webfont-usage)概述了所有可用的图标集及其名称前缀:
* `None` 用于 [填充图标](https://fonts.google.com/icons?icon.set=Material+Icons&icon.style=Filled)
* `"o_"` 用于 [轮廓图标](https://fonts.google.com/icons?icon.set=Material+Icons&icon.style=Outlined)
* `"r_"` 用于 [圆角图标](https://fonts.google.com/icons?icon.set=Material+Icons&icon.style=Rounded)
* `"s_"` 用于 [锐利图标](https://fonts.google.com/icons?icon.set=Material+Icons&icon.style=Sharp)
* `"sym_o_"` 用于 [轮廓符号](https://fonts.google.com/icons?icon.set=Material+Symbols&icon.style=Outlined)
* "`sym_r_"` 用于 [圆角符号](https://fonts.google.com/icons?icon.set=Material+Symbols&icon.style=Rounded)
* `"sym_s_"` 用于 [锐利符号](https://fonts.google.com/icons?icon.set=Material+Symbols&icon.style=Sharp)
```python
from nicegui import ui
with ui.row().classes('text-4xl'):
ui.icon('home')
ui.icon('o_home')
ui.icon('r_home')
ui.icon('sym_o_home')
ui.icon('sym_r_home')
# ui.run()
```
## {func}`nicegui.ui.icon` Eva 图标
您可以在应用程序中使用[Eva图标](https://akveo.github.io/eva-icons/)。
```python
from nicegui import ui
ui.add_head_html('<link href="https://unpkg.com/eva-icons@1.1.3/style/eva-icons.css" rel="stylesheet" />')
ui.icon('eva-github').classes('text-5xl')
# ui.run()
```
## {func}`nicegui.ui.icon` 其他图标集
您可以使用相同的方法将其他图标集添加到您的应用程序中。一般来说,您需要引用相应的CSS文件,而该CSS文件会进一步引用字体文件。此演示展示了如何包含[Themify图标](https://themify.me/themify-icons)。
```python
from nicegui import ui
ui.add_head_html('<link href="https://cdn.jsdelivr.net/themify-icons/0.1.2/css/themify-icons.css" rel="stylesheet" />')
ui.icon('ti-car').classes('text-5xl')
# ui.run()
```
## {func}`nicegui.ui.icon` Lottie 文件
您还可以使用[Lottie文件](https://lottiefiles.com/)与动画一起。
```python
from nicegui import ui
ui.add_body_html('<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>')
src = 'https://assets5.lottiefiles.com/packages/lf20_MKCnqtNQvg.json'
ui.html(f'<lottie-player src="{src}" loop autoplay />').classes('w-24')
# ui.run()
```