@next-bricks/presentational-bricks 1.339.0 → 1.339.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/deploy/contract.yaml +110 -110
- package/dist/bricks.json +24 -24
- package/dist/{index.e0f6d174.js → index.09224616.js} +2 -2
- package/dist/index.09224616.js.map +1 -0
- package/dist/stories.json +27 -27
- package/docs/brick-result.md +197 -0
- package/docs/brick-result.react.md +177 -0
- package/docs/brick-user.md +135 -0
- package/docs/brick-user.react.md +139 -0
- package/docs/brick-value-mapping.md +240 -0
- package/docs/brick-value-mapping.react.md +181 -0
- package/docs/cost-time.md +58 -0
- package/docs/cost-time.react.md +60 -0
- package/docs/datetime-selector.md +146 -0
- package/docs/datetime-selector.react.md +150 -0
- package/docs/general-label.md +115 -0
- package/docs/general-label.react.md +131 -0
- package/package.json +5 -4
- package/dist/index.e0f6d174.js.map +0 -1
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
---
|
|
2
|
+
tagName: presentational-bricks.general-label
|
|
3
|
+
displayName: WrappedPresentationalBricksGeneralLabel
|
|
4
|
+
description: 可用来展示基本文案、前后缀图标，可配置点击事件和 url 的通用 label 构件
|
|
5
|
+
category:
|
|
6
|
+
source: "@next-bricks/presentational-bricks"
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
# WrappedPresentationalBricksGeneralLabel
|
|
10
|
+
|
|
11
|
+
> 可用来展示基本文案、前后缀图标，可配置点击事件和 url 的通用 label 构件
|
|
12
|
+
|
|
13
|
+
## 导入
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
import { WrappedPresentationalBricksGeneralLabel } from "@easyops/wrapped-components";
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Props
|
|
20
|
+
|
|
21
|
+
| 属性 | 类型 | 必填 | 默认值 | 说明 |
|
|
22
|
+
| ---------- | ---------- | ---- | ------ | --------------------------------------------------- |
|
|
23
|
+
| text | `string` | - | - | 文字内容 |
|
|
24
|
+
| prefixIcon | `MenuIcon` | - | - | 前缀图标 |
|
|
25
|
+
| suffixIcon | `MenuIcon` | - | - | 后缀图标 |
|
|
26
|
+
| url | `string` | - | - | 链接的 URL |
|
|
27
|
+
| href | `string` | - | - | 外链地址，使用原生 `<a>` 标签跳转，通常用于外部链接 |
|
|
28
|
+
| dataSource | `any` | - | - | `onLabelClick`事件的传出的数据 |
|
|
29
|
+
| data | `any` | - | - | `onLabelClick`事件的详情 |
|
|
30
|
+
|
|
31
|
+
## Events
|
|
32
|
+
|
|
33
|
+
| 事件 | detail | 说明 |
|
|
34
|
+
| ------------ | ------------------------------------------------------------------------------------ | ----------------- |
|
|
35
|
+
| onLabelClick | 编排者通过 `dataSource` 属性传入的自定义数据（若未设置则回退到已废弃的 `data` 属性） | 点击 label 时触发 |
|
|
36
|
+
|
|
37
|
+
## Examples
|
|
38
|
+
|
|
39
|
+
### Basic
|
|
40
|
+
|
|
41
|
+
#### 展示带后缀图标的文本标签
|
|
42
|
+
|
|
43
|
+
```tsx
|
|
44
|
+
<WrappedPresentationalBricksGeneralLabel
|
|
45
|
+
text="2020-03-14"
|
|
46
|
+
suffixIcon={{
|
|
47
|
+
lib: "antd",
|
|
48
|
+
icon: "calendar",
|
|
49
|
+
theme: "outlined",
|
|
50
|
+
color: "#0071eb",
|
|
51
|
+
}}
|
|
52
|
+
/>
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
#### 展示带前缀图标的文本标签
|
|
56
|
+
|
|
57
|
+
```tsx
|
|
58
|
+
<WrappedPresentationalBricksGeneralLabel
|
|
59
|
+
text="1.0.0"
|
|
60
|
+
prefixIcon={{
|
|
61
|
+
lib: "antd",
|
|
62
|
+
icon: "tag",
|
|
63
|
+
theme: "outlined",
|
|
64
|
+
}}
|
|
65
|
+
/>
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
#### 仅展示纯文本标签
|
|
69
|
+
|
|
70
|
+
```tsx
|
|
71
|
+
<WrappedPresentationalBricksGeneralLabel text="示例文本" />
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
### Link
|
|
75
|
+
|
|
76
|
+
#### 使用 url 属性配置内部链接跳转
|
|
77
|
+
|
|
78
|
+
```tsx
|
|
79
|
+
<WrappedPresentationalBricksGeneralLabel
|
|
80
|
+
text="1.0.0"
|
|
81
|
+
prefixIcon={{
|
|
82
|
+
lib: "antd",
|
|
83
|
+
icon: "tag",
|
|
84
|
+
theme: "outlined",
|
|
85
|
+
}}
|
|
86
|
+
url="/resource-monitor"
|
|
87
|
+
/>
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
#### 使用 href 属性配置外部链接跳转
|
|
91
|
+
|
|
92
|
+
```tsx
|
|
93
|
+
<WrappedPresentationalBricksGeneralLabel
|
|
94
|
+
text="访问外部链接"
|
|
95
|
+
suffixIcon={{
|
|
96
|
+
lib: "antd",
|
|
97
|
+
icon: "link",
|
|
98
|
+
theme: "outlined",
|
|
99
|
+
}}
|
|
100
|
+
href="https://www.example.com"
|
|
101
|
+
/>
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
### Advanced
|
|
105
|
+
|
|
106
|
+
#### 点击标签触发事件并传出自定义数据
|
|
107
|
+
|
|
108
|
+
```tsx
|
|
109
|
+
function MyComponent() {
|
|
110
|
+
const handleLabelClick = (event: CustomEvent) => {
|
|
111
|
+
console.log(event.detail);
|
|
112
|
+
};
|
|
113
|
+
|
|
114
|
+
return (
|
|
115
|
+
<WrappedPresentationalBricksGeneralLabel
|
|
116
|
+
text="点击触发事件"
|
|
117
|
+
suffixIcon={{
|
|
118
|
+
lib: "antd",
|
|
119
|
+
icon: "calendar",
|
|
120
|
+
theme: "outlined",
|
|
121
|
+
color: "#0071eb",
|
|
122
|
+
}}
|
|
123
|
+
dataSource={{
|
|
124
|
+
id: 1,
|
|
125
|
+
name: "示例数据",
|
|
126
|
+
}}
|
|
127
|
+
onLabelClick={handleLabelClick}
|
|
128
|
+
/>
|
|
129
|
+
);
|
|
130
|
+
}
|
|
131
|
+
```
|
package/package.json
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@next-bricks/presentational-bricks",
|
|
3
|
-
"version": "1.339.
|
|
3
|
+
"version": "1.339.2",
|
|
4
4
|
"description": "> TODO: description",
|
|
5
5
|
"homepage": "https://github.com/easyops-cn/next-basics/tree/master/bricks/presentational-bricks",
|
|
6
6
|
"license": "GPL-3.0",
|
|
7
7
|
"files": [
|
|
8
8
|
"dist",
|
|
9
|
-
"
|
|
10
|
-
"
|
|
9
|
+
"dist-types",
|
|
10
|
+
"docs",
|
|
11
|
+
"deploy"
|
|
11
12
|
],
|
|
12
13
|
"exports": {
|
|
13
14
|
"./package.json": "./package.json",
|
|
@@ -85,5 +86,5 @@
|
|
|
85
86
|
"@next-dll/ace": "*",
|
|
86
87
|
"@next-dll/react-dnd": "*"
|
|
87
88
|
},
|
|
88
|
-
"gitHead": "
|
|
89
|
+
"gitHead": "ab912139c3d19cafac2392750adae5970b067b70"
|
|
89
90
|
}
|