mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-02 03:58:07 +08:00
c721d22ab6
* fix: 为tooltipwrapper浮层绑定指定事件，并丰富enterable属性 * fix: 简化代码逻辑 Co-authored-by: ”jiatianqi“ <”jiatianqi@baidu.com“>
11 KiB
11 KiB
| title | description | type | group | menuName | icon | order |
|---|---|---|---|---|---|---|
| TooltipWrapper 文字提示容器 | 0 | ⚙ 功能 | TooltipWrapper | 59 |
基本配置
当用户鼠标悬停或者点击元素时，显示文字提示浮层，title可以为浮层添加标题。
[
{
"type": "flex",
"justify": "space-around",
"alignItems": "center",
"direction": "row",
"style": {
"width": 350,
"height": 30
},
"items": [
{
"type": "tooltip-wrapper",
"content": "提示文字",
"body": "hover 激活文字提示",
"className": "mb-1"
},
{
"type": "tooltip-wrapper",
"title": "标题",
"content": "提示文字",
"trigger": "click",
"body": "click 激活文字提示",
"className": "mb-1"
}
]
}
]
body支持传入多个子元素：
[
{
"type": "tooltip-wrapper",
"content": "删除提示",
"inline": true,
"body": [
{
"type": "tpl",
"tpl": "删除"
},
{
"className": "ml-1",
"type": "icon",
"icon": "trash"
}
]
}
]
提示位置
提供四种不同方向的展示方式：'top' | 'left' | 'right' | 'bottom'。
{
"type": "flex",
"justify": "space-around",
"alignItems": "center",
"direction": "column",
"items": [
{
type: "flex",
"justify": "center",
"alignItems": "center",
"direction": "row",
"style": {
"width": 100,
"height": 30
},
"items": [
{
"type": "tooltip-wrapper",
"content": "提示文字",
"body": [
{
"type": "icon",
"icon": "arrow-circle-up",
"className": "mr-1"
},
{
type: "tpl",
"tpl": "上"
}
]
}
]
},
{
type: "flex",
"justify": "space-around",
"alignItems": "center",
"direction": "row",
"style": {
"width": 200,
"height": 30
},
"items": [
{
"type": "tooltip-wrapper",
"content": "提示文字",
"placement": "left",
"body": [
{
"type": "icon",
"icon": "arrow-circle-left",
"className": "mr-1"
},
{
type: "tpl",
"tpl": "左"
}
]
},
{
"type": "tooltip-wrapper",
"content": "提示文字",
"placement": "right",
"body": [
{
"type": "icon",
"icon": "arrow-circle-right",
"className": "mr-1"
},
{
type: "tpl",
"tpl": "右"
}
]
}
]
},
{
type: "flex",
"justify": "center",
"alignItems": "center",
"direction": "row",
"style": {
"width": 100,
"height": 30
},
"items": [
{
"type": "tooltip-wrapper",
"content": "提示文字",
"placement": "bottom",
"body": [
{
"type": "icon",
"icon": "arrow-circle-down",
"className": "mr-1"
},
{
type: "tpl",
"tpl": "下"
}
]
}
]
}
]
}
位置偏移
组件提供了关于相对提示位置的垂直、水平位置上的偏移，默认[0, 0]。
[
{
"type": "tooltip-wrapper",
"title": "标题",
"content": "文案提示位置偏移 [10, -20]",
"offset": [10, -20],
"inline": true,
"className": "mr-2",
"body": [
{
"type": "tpl",
"tpl": "向右偏移10px向上偏移20px"
}
]
}
]
展示箭头
showArrow 为 false 不展示箭头。
[
{
"type": "tooltip-wrapper",
"title": "标题",
"content": "提示内容",
"showArrow": false,
"inline": true,
"className": "mr-2",
"body": [
{
"type": "tpl",
"tpl": "没有箭头"
}
]
}
]
主题色
组件提供了两个不同的主题：dark 和 light，默认使用light。
[
{
"type": "tooltip-wrapper",
"title": "标题",
"content": "文案提示",
"inline": true,
"className": "mr-2",
"body": [
{
"type": "tpl",
"tpl": "light主题提示"
}
]
},
{
"type": "tooltip-wrapper",
"title": "标题",
"content": "文案提示",
"inline": true,
"tooltipTheme": "dark",
"body": [
{
"type": "tpl",
"tpl": "dark主题提示"
}
]
}
]
延迟打开&关闭
mouseEnterDelay 为延迟展示, mouseLeaveDelay 为延迟隐藏，
[
{
"type": "tooltip-wrapper",
"title": "标题",
"content": "提示内容",
"mouseEnterDelay": 1000,
"mouseLeaveDelay": 2000,
"inline": true,
"className": "mr-2",
"body": [
{
"type": "tpl",
"tpl": "延迟1s展示，延迟2s隐藏"
}
]
}
]
动态文案
content 和 title 支持变量映射，可以从上下文中动态获取提示文案。
{
"type": "page",
"data": {
"text": "The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis."
},
body: {
"type": "tooltip-wrapper",
"content": "${text}",
"body": {
"type": "html",
"style": {
"overflow": "hidden",
"textOverflow": "ellipsis",
"whiteSpace": "nowrap",
"maxWidth": "300px",
"display": "inline-block"
},
"html": "${text}"
}
}
}
内联展示
设置"inline": true使容器内联展示
[
{
"type": "tooltip-wrapper",
"content": "文字提示",
"inline": true,
"className": "p-1 mr-3 border-2 border-solid border-indigo-400",
"body": "内联容器1"
},
{
"type": "tooltip-wrapper",
"content": "文字提示",
"inline": true,
"className": "p-1 mr-3 border-2 border-solid border-indigo-400",
"body": "内联容器2"
},
{
"type": "tooltip-wrapper",
"content": "文字提示",
"className": "p-1 mt-3 border-2 border-solid border-green-400",
"body": "非内联容器"
}
]
自定义样式
使用style控制内容区样式，tooltipStyle控制浮层区样式
{
"type": "tooltip-wrapper",
"content": "文字提示(加粗)",
"inline": true,
"style": {
fontStyle: "italic"
},
"tooltipStyle": {
fontWeight: "bold"
},
"body": [
{
"type": "tpl",
"tpl": "一段文案"
}
]
}
自定义包裹标签
使用wrapperComponent修改标签名，可以让容器使用其他标签渲染：
{
"type": "tooltip-wrapper",
"content": "文字提示",
"wrapperComponent": "pre",
"body": "function HelloWorld() {\n console.log('Hello World');\n}"
}
属性表
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| type | string |
"tooltip-wrapper" |
指定为文字提示容器组件 |
| title | string |
"" |
文字提示标题 |
| content | string |
"" |
文字提示内容, 兼容之前的 tooltip 属性 |
| placement | "top" | "left" | "right" | "bottom" |
"top" |
文字提示浮层出现位置 |
| tooltipTheme | "light" | "dark" |
"light" |
主题样式， 默认为 light |
| offset | [number, number] |
[0, 0] |
文字提示浮层位置相对偏移量，单位 px |
| showArrow | boolean |
true |
是否展示浮层指向箭头 |
| enterable | boolean |
true |
是否鼠标可以移入到浮层中 |
| disabled | boolean |
false |
是否禁用浮层提示 |
| trigger | "hover" | "click" | "focus" | Array<"hover" | "click" | "focus"> |
"hover" |
浮层触发方式，支持数组写法["hover", "click"] |
| mouseEnterDelay | number |
0 |
浮层延迟展示时间，单位 ms |
| mouseLeaveDelay | number |
300 |
浮层延迟隐藏时间，单位 ms |
| rootClose | boolean |
true |
是否点击非内容区域关闭提示 |
| inline | boolean |
false |
内容区是否内联显示 |
| wrapperComponent | string |
"div" | "span" |
容器标签名 |
| body | SchemaNode | - | 内容容器 |
| style | Object | string |
内容区自定义样式 | |
| tooltipStyle | Object | string |
浮层自定义样式 | |
| className | string |
内容区类名 | |
| tooltipClassName | string |
文字提示浮层类名 |