跳到主要内容

气泡提示

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"气泡提示的风格
打开时延(毫秒)openDelaynumber高级属性0气泡提示的打开时延(毫秒)
关闭时延(毫秒)closeDelaynumber高级属性0气泡提示的关闭时延(毫秒)
箭头是否指向中心arrowPointAtCenterboolean高级属性false气泡提示的箭头是否指向中心

事件#

组件暴露的事件,可以监听组件的事件来触发一些外部的动作

事件名
事件code
事件出参 event.detail
适用情况
说明
打开气泡openWEB端-
关闭气泡closeWEB端-

属性 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 端的气泡编写样式

了解样式 API

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;}

版本变化#