简介
@polymer/paper-ripple 是一个基于 Polymer 框架的 Material Design 水波纹效果组件，它可以为用户交互事件添加动态的效果，增强用户体验，是开发现代 Web 应用程序的绝佳选择。
在本文中，我们将介绍如何使用 @polymer/paper-ripple 包，让您从中受益。
安装
您可以通过 npm 指令，安装 @polymer/paper-ripple 包：
npm install @polymer/paper-ripple
使用
要使用 @polymer/paper-ripple，您需要在 Polymer 或 LitElement 组件中引入它们并添加到模板中。
-- -------------------- ---- -------
---- -- ------ ---
-----
----------------
--------------------------------------------------------------------------------
--
---- -- ----- ---
------- --------------
------ - ------------- - ---- ----------------------------------------
------ - ----------- ---- - ---- --------------
----- ----------- ------- ---------- -
-------- -
------ -----
-------
----- -
-------- ------
-
------ -
--------- ---------
--------- -------
------- -----
----------------- --------
------ -----
-------- -----
------- --------
----------- - --- --- ------- -- -- -----
-------------- ----
---------- -----
------------ ----
------ ------
------- -----
------- -----
-------- --
----------- ---------------- -----
-
------------ -
----------------- --------
-
------------ -
----------------- --------
-
--------
---- -- - ------------- ------ ---
------- ------------------------------------
----- ---
---------------------------------
---------
--
-
-------------------- -
----- ------ - ------------------------------------------------
-------------------------
-
-
------------------------------------- -------------
---------
---- -- ----------- ---
-----------------------------通过上面的示例，您可以快速上手 @polymer/paper-ripple 包，并为您的 Web 应用程序增添 Material Design 风格的水波纹效果。
深入
@polymer/paper-ripple 包不仅提供了简单易用的 API，还有丰富的配置项，以满足您的个性化需求。
RippleSurface
RippleSurface 才是 @polymer/paper-ripple 的核心组件，它是一个可复用的可定制化的页面元素，可以添加到任何支持自定义元素的框架中。
属性
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
accent |
boolean |
false | 是否为强调波纹 |
center |
boolean |
false | 是否在中心启动波纹 |
disabled |
boolean |
false | 是否禁用波纹 |
holdDown |
boolean |
false | 是否一直按下不松开，持续激活波纹 |
noink |
boolean |
false | 是否隐藏波纹 |
recenters |
boolean |
false | 是否在活动事件后重新定位波纹 |
release |
boolean |
false | 是否在活动事件后释放波纹 |
round |
boolean |
false | 是否为圆形波纹 |
target |
object |
null | 活动目标元素 |
userTrigger |
boolean |
false | 是否由用户触发 |
animating |
boolean |
false | 是否正在动画中间，如果应用是在 anmitating 时完成的，那么在 nextRender(dev branch) 中立即更新样式 |
bound |
boolean |
false | 是否应绑定服务器响应，以便 ddating RippleSurface |
pressAction |
string |
"ripple" | 标识按压时应用的行为类型 |
方法
| 方法 | 描述 |
|---|---|
holdDown() |
模拟按下即按住动作，持续激活波纹 |
release() |
模拟释放按钮，结束波纹 |
downAction() |
按下时的行为模拟方法 |
upAction() |
释放时的行为模拟方法 |
rippleAction() |
模拟间隔波纹的方法 |
simulatedRipple() |
模拟按下并释放按钮，启动波纹动画 |
cancelRemainders() |
取消与本波形实例相关的任何的计时器或动画刷帧 |
使用示例
<ripple-surface accent center disabled holdDown noink recenters release round target userTrigger animating></ripple-surface>
结论
@polymer/paper-ripple 是一个强大的 Polymer 框架下的 Material Design 水波纹效果组件，凭借着优秀的性能和易用性，成为了现代 Web 应用程序开发人员必备的工具之一。通过本文的介绍和示例，相信您已经能够快速上手使用 @polymer/paper-ripple 包，为您的应用程序添加动态的效果，提升用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f755ffaa9b7065299ccbcbb