离子纹波效果
纹波效果组件添加了
材料设计墨水纹波相互作用效果
。该组件只能在其中使用
并且可以添加到任何组件。
值得注意的是，父母应该有
相对定位
因为纹波效果绝对定位，并且将覆盖相对定位的最近的父母。还应给出父元素
离子可激活
类，讲述元素可点击的纹波效果。
默认类型，
“有界”
，将从单击位置向外扩展纹波效果。要添加始终从元素中心开始的纹波效果并在圆圈中展开，请添加
“无限制”
类型。它建议添加
溢出：隐藏
到父元素以避免云溢出的纹波，尤其是无限的纹波。
用法
<
离子应用程序
>
<
离子内容
>
<
div
班级
=
“
离子可激活的波纹 - 父
“
>
一个普遍存在的涟漪效应
<
离子纹波效果
>
离子纹波效果
>
div
>
<
按钮
班级
=
“
离子可激活的波纹 - 父
“
>
一个有界纹波效果的按钮
<
离子纹波效果
>
离子纹波效果
>
按钮
>
<
div
班级
=
“
离子可激活的波纹 - 父
“
>
一个普通的涟漪效应
<
离子纹波效果
类型
=
“
无界限
“
>
离子纹波效果
>
div
>
<
按钮
班级
=
“
离子可激活的波纹 - 父
“
>
一个无限的纹波效果的按钮
<
离子纹波效果
类型
=
“
无界限
“
>
离子纹波效果
>
按钮
>
离子内容
>
离子应用程序
>
复制
复制
。重量级父母
{
位置
：
相对的
;
溢出
：
隐
;
}
复制
复制
<
离子应用程序
>
<
离子内容
>
<
div
班级
=
“
离子可激活的波纹 - 父
“
>
一个普遍存在的涟漪效应
<
离子纹波效果
>
离子纹波效果
>
div
>
<
按钮
班级
=
“
离子可激活的波纹 - 父
“
>
一个有界纹波效果的按钮
<
离子纹波效果
>
离子纹波效果
>
按钮
>
<
div
班级
=
“
离子可激活的波纹 - 父
“
>
一个普通的涟漪效应
<
离子纹波效果
类型
=
“
无界限
“
>
离子纹波效果
>
div
>
<
按钮
班级
=
“
离子可激活的波纹 - 父
“
>
一个无限的纹波效果的按钮
<
离子纹波效果
类型
=
“
无界限
“
>
离子纹波效果
>
按钮
>
离子内容
>
离子应用程序
>
复制
复制
。重量级父母
{
位置
：
相对的
;
溢出
：
隐
;
}
复制
复制
进口
反应
从
'反应'
;
进口
{
Ionapp.
那
离子联系
那
Ionrippleeffect.
}
从
'@betway东盟体育app离子/反应'
;
进口
'./rippleeffectexample.css'
;
出口
Const.
rippleexample.
：
反应
。
FC.
=
（
的）
=>
（
<
Ionapp.
>
<
离子联系
>
<
div
班级名称
=
“
离子可激活的波纹 - 父
“
>
一个普遍存在的涟漪效应
<
Ionrippleeffect.
>
Ionrippleeffect.
>
div
>
<
按钮
班级名称
=
“
离子可激活的波纹 - 父
“
>
一个有界纹波效果的按钮
<
Ionrippleeffect.
>
Ionrippleeffect.
>
按钮
>
<
div
班级名称
=
“
离子可激活的波纹 - 父
“
>
一个普通的涟漪效应
<
Ionrippleeffect.
类型
=
“
无界限
“
>
Ionrippleeffect.
>
div
>
<
按钮
班级名称
=
“
离子可激活的波纹 - 父
“
>
一个无限的纹波效果的按钮
<
Ionrippleeffect.
类型
=
“
无界限
“
>
Ionrippleeffect.
>
按钮
>
离子联系
>
Ionapp.
>
的）
;
复制
复制
。重量级父母
{
位置
：
相对的
;
溢出
：
隐
;
}
复制
复制
进口
{
零件
那
H
}
从
'@模板/核心'
;
@
零件
（
{
标签
：
'涟漪 - 效果 - 举例'
那
styleurl.
：
'涟漪 - 效果 - example.css'
}
的）
出口
班级
rippleeffectexample.
{
使成为
（
的）
{
返回
[
<
离子应用程序
>
<
离子内容
>
<
div
班级
=
“
离子可激活的波纹 - 父
“
>
一个普遍存在的涟漪效应
<
离子纹波效果
>
离子纹波效果
>
div
>
<
按钮
班级
=
“
离子可激活的波纹 - 父
“
>
一个有界纹波效果的按钮
<
离子纹波效果
>
离子纹波效果
>
按钮
>
<
div
班级
=
“
离子可激活的波纹 - 父
“
>
一个普通的涟漪效应
<
离子纹波效果
类型
=
“
无界限
“
>
离子纹波效果
>
div
>
<
按钮
班级
=
“
离子可激活的波纹 - 父
“
>
一个无限的纹波效果的按钮
<
离子纹波效果
类型
=
“
无界限
“
>
离子纹波效果
>
按钮
>
离子内容
>
离子应用程序
>
]
;
}
}
复制
复制
。重量级父母
{
位置
：
相对的
;
溢出
：
隐
;
}
复制
复制
<
模板
>
<
离子应用程序
>
<
离子内容
>
<
div
班级
=
“
离子可激活的波纹 - 父
“
>
一个普遍存在的涟漪效应
<
离子纹波效果
>
离子纹波效果
>
div
>
<
按钮
班级
=
“
离子可激活的波纹 - 父
“
>
一个有界纹波效果的按钮
<
离子纹波效果
>
离子纹波效果
>
按钮
>
<
div
班级
=
“
离子可激活的波纹 - 父
“
>
一个普通的涟漪效应
<
离子纹波效果
类型
=
“
无界限
“
>
离子纹波效果
>
div
>
<
按钮
班级
=
“
离子可激活的波纹 - 父
“
>
一个无限的纹波效果的按钮
<
离子纹波效果
类型
=
“
无界限
“
>
离子纹波效果
>
按钮
>
离子内容
>
离子应用程序
>
模板
>
<
风格
>
。重量级父母
{
位置
：
相对的
;
溢出
：
隐
;
}
风格
>
<
脚本
>
进口
{
Ionapp.
那
离子联系
那
Ionrippleeffect.
}
从
'@betway东盟体育app ionic / vue'
;
进口
{
绝缘组分
}
从
'vue'
;
出口
默认
绝缘组分
（
{
成分
：
{
Ionapp.
那
离子联系
那
Ionrippleeffect.
}
}
的）
;
脚本
>
复制
复制
特性
类型 |
|
|---|---|
| 描述 |
设置纹波效果的类型：
注意：界限纹波的曲面应将溢出属性设置为隐藏，而无限制的纹波的曲面应使其设置为可见。 |
| 属性 |
类型 |
| 类型 |
“有界”|“无限制” |
| 默认 |
'有界' |
方法
附加联系方式 |
|
|---|---|
| 描述 |
将纹波效果添加到父元素。 |
| 签名 |
附加提示（x：number，y：number）=> promise <（）=> void> |