UNPKG

antd-mini

Version:

antd-mini 是支付宝小程序 UI 组件库，遵循 Ant Design 规范。

github.com/ant-design/ant-design-mini

ant-design/ant-design-mini

96 lines (72 loc) • 6.34 kB
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
86
87
88
89
90
91
92
93
94
95
96
--- nav: path: /components group: title: Information Display order: 8 toc: 'content' --- # Tag Small labels for labeling and classification. ## Introduction In `index.json` Introducing Components in ```json "usingComponents": { #if ALIPAY "ant-tag": "antd-mini/es/Tag/index" #endif #if WECHAT "ant-tag": "antd-mini/Tag/index" #endif } ``` ## Code Sample ### Basic use ```xml <ant-tag>Label</ant-tag> ``` ### semantic label ```xml <ant-tag>primary</ant-tag> <ant-tag color="success">success</ant-tag> <ant-tag color="warning">warning</ant-tag> <ant-tag color="danger">danger</ant-tag> ``` ### Fill mode ```xml <ant-tag type="fill">fill</ant-tag> <ant-tag type="outline">outline</ant-tag> <ant-tag color="fill-light">fill-light</ant-tag> ``` ### Custom icon ```xml <ant-tag icon="AlipayCircleFill">Label</ant-tag> ``` ### Demo Code <code src='../../demo/pages/Tag/index'></code> ## API | Property | Description | Type | Default Value | | --------- | ---------------------------------------------------------------------------------------- | ------------ | --------- | | className | Class Name | string | - | | color | Label color, built-in `primary`(blue),`success`(Green),`warning`(yellow),`danger`(Red) | string | `primary` | | icon | Icon, support Icon type and slot | string\|slot | - | | style | Style | string | - | | type | type, optional `outline`、`fill`、`fill-light` | string | `fill` | ### Theme customization #### Style Variables Component provides the following CSS variables, which can be used to customize styles. For details, see ConfigProvider Components. | Variable name | Light Mode Default | Dark Mode Default | Remarks | | ------------------------- | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | -------------------- | | --tag-primary-color | <div style="width: 150px; height: 40px; background-color: #1677ff; color: #ffffff;">#1677ff</div> | <div style="width: 150px; height: 40px; background-color: #3086ff; color: #ffffff;">#3086ff</div> | Primary Label Color | | --tag-warning-color | <div style="width: 150px; height: 40px; background-color: #ff6430; color: #ffffff;">#ff6430</div> | <div style="width: 150px; height: 40px; background-color: #e65a2b; color: #ffffff;">#e65a2b</div> | Warning Label Color | | --tag-danger-color | <div style="width: 150px; height: 40px; background-color: #ff3141; color: #ffffff;">#ff3141</div> | <div style="width: 150px; height: 40px; background-color: #ff4a58; color: #ffffff;">#ff4a58</div> | Hazard label color | | --tag-success-color | <div style="width: 150px; height: 40px; background-color: #22b35e; color: #ffffff;">#22b35e</div> | <div style="width: 150px; height: 40px; background-color: #34b368; color: #ffffff;">#34b368</div> | Success Label Color | | --tag-primary-light-color | <div style="width: 150px; height: 40px; background-color: #e7f1ff; color: #333333;">#e7f1ff</div> | <div style="width: 150px; height: 40px; background-color: #0d2543; color: #ffffff;">#0d2543</div> | Main label light | | --tag-warning-light-color | <div style="width: 150px; height: 40px; background-color: #ffefdf; color: #333333;">#ffefdf</div> | <div style="width: 150px; height: 40px; background-color: #ffefdf; color: #333333;">#ffefdf</div> | Warning label light color | | --tag-danger-light-color | <div style="width: 150px; height: 40px; background-color: #ffece3; color: #333333;">#ffece3</div> | <div style="width: 150px; height: 40px; background-color: #ffece3; color: #333333;">#ffece3</div> | Hazard label light | | --tag-success-light-color | <div style="width: 150px; height: 40px; background-color: #d4fff1; color: #333333;">#d4fff1</div> | <div style="width: 150px; height: 40px; background-color: #d4fff1; color: #333333;">#d4fff1</div> | Success Label Light | | --tag-base-color | <div style="width: 150px; height: 40px; background-color: #ffffff; color: #333333;">#ffffff</div> | <div style="width: 150px; height: 40px; background-color: #ffffff; color: #333333;">#ffffff</div> | Base Label Color | | --tag-primary-color-faded | <div style="width: 150px; height: 40px; background-color: rgba(22, 119, 255, 0.3); color: #ffffff;">rgba(22, 119, 255, 0.3)</div> | <div style="width: 150px; height: 40px; background-color: rgba(22, 119, 255, 0.3); color: #ffffff;">rgba(22, 119, 255, 0.3)</div> | Main label color (faded) | | --tag-warning-color-faded | <div style="width: 150px; height: 40px; background-color: rgba(255, 100, 48, 0.7); color: #ffffff;">rgba(255, 100, 48, 0.7)</div> | <div style="width: 150px; height: 40px; background-color: rgba(255, 100, 48, 0.7); color: #ffffff;">rgba(255, 100, 48, 0.7)</div> | Warning label color (faded) | | --tag-danger-color-faded | <div style="width: 150px; height: 40px; background-color: rgba(255, 49, 65, 0.7); color: #ffffff;">rgba(255, 49, 65, 0.7)</div> | <div style="width: 150px; height: 40px; background-color: rgba(255, 49, 65, 0.7); color: #ffffff;">rgba(255, 49, 65, 0.7)</div> | Hazard label color (faded) | | --tag-success-color-faded | <div style="width: 150px; height: 40px; background-color: rgba(34, 179, 94, 0.7); color: #ffffff;">rgba(34, 179, 94, 0.7)</div> | <div style="width: 150px; height: 40px; background-color: rgba(34, 179, 94, 0.7); color: #ffffff;">rgba(34, 179, 94, 0.7)</div> | Success Label Color (Faded) |