气泡提示
WdBubble
#
适用场景用于显示气泡的提示。
#
示例#
不同触发行为的显示#
不同弹出方向的显示#
不同风格的气泡#
气泡延时打开和关闭#
属性组件接收的外部传入的属性
属性名 | 属性标识 | 类型 | 属性分组 | 默认值 | 说明 |
---|
触发行为 | trigger | "hover"|"click" | 基础属性 | "hover" | 触发气泡提示的行为 |
弹出方向 | placement | "top"|"top-start"|"top-end"|"left"|"left-start"|"left-end"|"bottom"|"bottom-start"|"bottom-end"|"right"|"right-start"|"right-end" | 基础属性 | "top" | 气泡提示的弹出方向 |
气泡风格 | promptTheme | "default"|"error"|"dark" | 基础属性 | "default" | 气泡提示的风格 |
打开时延(毫秒) | openDelay | number | 高级属性 | 0 | 气泡提示的打开时延(毫秒) |
关闭时延(毫秒) | closeDelay | number | 高级属性 | 0 | 气泡提示的关闭时延(毫秒) |
箭头是否指向中心 | arrowPointAtCenter | boolean | 高级属性 | false | 气泡提示的箭头是否指向中心 |
#
事件组件暴露的事件,可以监听组件的事件来触发一些外部的动作
事件名 | 事件code | 事件出参 event.detail | 适用情况 | 说明 |
---|
打开气泡 | open | WEB端 | - | |
关闭气泡 | close | WEB端 | - |
#
属性 API通过属性 API,可以获取组件内部的状态和属性值
只读属性名 | 属性标识 | 类型 | 说明 |
---|
触发行为 | trigger | "hover"|"click" | 触发气泡提示的行为 |
弹出方向 | placement | "top"|"top-start"|"top-end"|"left"|"left-start"|"left-end"|"bottom"|"bottom-start"|"bottom-end"|"right"|"right-start"|"right-end" | 气泡提示的弹出方向 |
气泡风格 | promptTheme | "default"|"error"|"dark" | 气泡提示的风格 |
#
无 方法 API#
样式 API通过样式 API,可以覆盖组件中内部元素的样式来实现自定义
名称 | 类名 | 说明 |
---|
根元素 | .wd-bubble | 气泡组件根元素 |
触发内容父元素 | .wd-bubble-child | 气泡插槽触发内容的父级元素,可以设置内容内部样式 |
PC 端气泡根元素 | .wd-pc-bubble | 可以为 PC 端的气泡编写样式 |
H5 端气泡根元素 | .wd-h5-bubble | 可以为 H5 端的气泡编写样式 |
#
CSS 变量.wd-bubble { // 气泡提示的上外边距 --wd-bubble-top: 0px; // 气泡内容的左右内边距 --wd-bubble-inner-horizontal-padding: 12px; // 气泡内容的上下内边距 --wd-bubble-inner-vertical-padding: 8px; // 气泡内容的圆角 --wd-divider-inner-border-radius: 3px;}
#
版本变化无