开发手册 欢迎您!
软件开发者资料库

Framework7 - Touch Ripple

Framework7 Touch Ripple - 从概述,环境,布局,导航栏,工具栏,搜索栏,状态栏,侧面板,内容块,布局网格,叠加层,预加载器,进度条,列表视图,手风琴,卡片,芯片,按钮开始学习Framework7 ,动作按钮,窗体,选项卡,Swiper滑块,照片浏览器,自动完成,选择器,日历,刷新,无限滚动,消息,消息栏,通知,延迟加载,颜色主题,细线,模板概述,自动编译,Template7页面,活动状态,点击保持事件,触摸波纹。

描述

Touch Ripple是仅在Framework7材质主题中受支持的效果.默认情况下,它在材质主题中启用,您可以使用 materialRipple:false 参数禁用它.

Ripple Elements

你可以启用ripple元素来匹配一些CSS选择器,例如 :

  • ripple

  • a.link

  • a.item-link

  • .button

  • .tab-link

  • .label-radio

  • .label-checkbox等.

这些在 materialRippleElements 参数中指定.您需要启用触摸波纹,将元素的选择器添加到 materialRippleElements 参数以使用波纹效果,或者只使用波纹类.

波纹波颜色

通过添加纹波 -  [颜色] 元素的类.

例如 :

Ripple Button

或者您可以使用CSS定义波纹波颜色,如下所示 :

.button .ripple-wave {   background-color: #FFFF00;}

禁用纹波元素

您可以通过添加

Ripple Button
charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js">