介绍
@beisen-cmps/tool-tip
是一款基于 React 的弹出提示框(tooltip)插件,可以快速搭建一个美观且易用的提示框功能。它提供了多种主题样式可选,及丰富的 API 与事件来满足不同场景的需求。
安装
你可以使用 npm
或 yarn
安装该插件:
--- ------- ---------------------
或
---- --- ---------------------
使用
引入插件:
------ ------- ---- ------------------------
简单用例:
-------- ---------------- ---- ------------------- ----------
效果演示:
API
content
- 类型:
string
- 说明: ToolTip 显示的内容
theme
- 类型:
string
- 默认值:
'default'
- 说明: ToolTip 的主题样式,目前支持的样式有
'default'
(默认样式)和'light'
(浅色主题)
position
- 类型:
string
- 默认值:
'top'
- 说明: ToolTip 显示的位置,目前支持的位置有
'top'
、'bottom'
、'left'
和'right'
delay
- 类型:
number
- 默认值:
400
- 说明: ToolTip 显示和隐藏的延迟时间(毫秒)
events
- 类型:
object
- 说明: ToolTip 支持的事件
目前支持的事件有:
onShow
- 显示 ToolTip 时触发onHide
- 隐藏 ToolTip 时触发
className
- 类型:
string
- 说明: ToolTip 的自定义类名
示例
在实际使用中,你可以根据不同的需求来自定义 ToolTip 的样式、事件响应等,下面是一个完整的示例:
------ ------ - --------- - ---- -------- ------ ------- ---- ------------------------ ----- ---- ------- --------- - -------- - ----- ------- - - ---- ----------------------------------------- ----- ----- --- ---- ----------- ----------- -------------- ------- ---- ----- ---- --- ------------ -- ------ - ---- ----------------- ----------- --------- ---- ---- -------- ------------------ --------- ---------- -------------- ---------- ----- ---- -------- ------------- ----------------- ----------- ------------- --------- ---------- -------------- ---------- ----- ---- -------- ----------- -------- ----------------- -------- -------------- ---------- ----- ---- -------- ------------------ ----------- -------------- ---------- ----- ----- ------ -- - - ------ ------- -----
在自定义类名时,你可以这样使用:
---------------- - ----------- -------- ------- --- ----- -------- ------ ----- ---------- ----- ------------ ---- ---------- ------ -------- ----- -
结语
@beisen-cmps/tool-tip
是一款方便易用的弹出提示框插件,使用简单,可以快速实现开发中常用功能,如果你有其他功能需求或发现了 bug,欢迎提出 issues。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/136680