Skip to content

Commit e82d85c

Browse files
authored
feat(Popover): add new component (#4049)
* feat: api * chore: config * feat: popover * feat: demo * feat: demo * feat: demo and test * feat: test * feat: test * chore: test * fix: test * chore: fix visible * fix: cr * fix: style * fix: cr * fix: demo error * chore: support switch placement * chore: update snapshot * chore: class * fix: cr * chore: add wait time * chore: remove skyline
1 parent 924ab85 commit e82d85c

File tree

33 files changed

+2325
-0
lines changed

33 files changed

+2325
-0
lines changed
Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
:: BASE_DOC ::
2+
3+
## API
4+
5+
6+
### Popover Props
7+
8+
name | type | default | description | required
9+
-- | -- | -- | -- | --
10+
style | Object | - | CSS(Cascading Style Sheets) | N
11+
custom-style | Object | - | CSS(Cascading Style Sheets),used to set style on virtual component | N
12+
close-on-click-outside | Boolean | true | \- | N
13+
content | String | - | \- | N
14+
placement | String | top | options: top/left/right/bottom/top-left/top-right/bottom-left/bottom-right/left-top/left-bottom/right-top/right-bottom | N
15+
show-arrow | Boolean | true | \- | N
16+
theme | String | dark | options: dark/light/brand/success/warning/error | N
17+
visible | Boolean | - | \- | N
18+
19+
### Popover Events
20+
21+
name | params | description
22+
-- | -- | --
23+
visible-change | `(visible: boolean)` | \-
24+
25+
### Popover Slots
26+
27+
name | Description
28+
-- | --
29+
\- | \-
30+
content | \-
31+
32+
### Popover External Classes
33+
34+
className | Description
35+
-- | --
36+
t-class | \-
37+
t-class-content | \-
38+
39+
### CSS Variables
40+
41+
The component provides the following CSS variables, which can be used to customize styles.
42+
Name | Default Value | Description
43+
-- | -- | --
44+
--td-popover-padding | 24rpx | -
Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
---
2+
title: Popover 弹出气泡
3+
description: 用于文字提示的气泡框。
4+
spline: data
5+
isComponent: true
6+
---
7+
8+
9+
## 引入
10+
11+
全局引入,在 miniprogram 根目录下的`app.json`中配置,局部引入,在需要引入的页面或组件的`index.json`中配置。
12+
13+
```json
14+
"usingComponents": {
15+
"t-popover": "tdesign-miniprogram/popover/popover"
16+
}
17+
```
18+
19+
<!-- ## 代码演示 -->
20+
21+
22+
### 组件类型
23+
带箭头的弹出气泡
24+
25+
{{ base }}
26+
27+
## API
28+
29+
30+
### Popover Props
31+
32+
名称 | 类型 | 默认值 | 描述 | 必传
33+
-- | -- | -- | -- | --
34+
style | Object | - | 样式 | N
35+
custom-style | Object | - | 样式,一般用于开启虚拟化组件节点场景 | N
36+
close-on-click-outside | Boolean | true | 是否在点击外部元素后关闭菜单 | N
37+
content | String | - | 确认框内容 | N
38+
placement | String | top | 浮层出现位置。可选项:top/left/right/bottom/top-left/top-right/bottom-left/bottom-right/left-top/left-bottom/right-top/right-bottom | N
39+
show-arrow | Boolean | true | 是否显示浮层箭头 | N
40+
theme | String | dark | 弹出气泡主题。可选项:dark/light/brand/success/warning/error | N
41+
visible | Boolean | - | 是否显示气泡确认框 | N
42+
43+
### Popover Events
44+
45+
名称 | 参数 | 描述
46+
-- | -- | --
47+
visible-change | `(visible: boolean)` | 确认框显示或隐藏时触发
48+
49+
### Popover Slots
50+
51+
名称 | 描述
52+
-- | --
53+
\- | 自定义 `` 显示内容
54+
content \| 自定义 `content` 显示内容
55+
56+
### Popover External Classes
57+
58+
类名 | 描述
59+
-- | --
60+
t-class | 根节点样式类
61+
t-class-content | 内容样式类
62+
63+
### CSS Variables
64+
65+
组件提供了下列 CSS 变量,可用于自定义样式。
66+
名称 | 默认值 | 描述
67+
-- | -- | --
68+
--td-popover-padding | 24rpx | -

0 commit comments

Comments
 (0)