离子纹波效果
纹波效果组件添加了
材料设计墨水纹波相互作用效果
。该组件只能在其中使用
并且可以添加到任何组件。
值得注意的是,父母应该有
相对定位
因为纹波效果绝对定位,并且将覆盖相对定位的最近的父母。还应给出父元素
离子可激活
类,讲述元素可点击的纹波效果。
默认类型,
“有界”
,将从单击位置向外扩展纹波效果。要添加始终从元素中心开始的纹波效果并在圆圈中展开,请添加
“无限制”
类型。它建议添加
溢出:隐藏
到父元素以避免云溢出的纹波,尤其是无限的纹波。
用法
<
离子应用程序
>
<
离子内容
>
<
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> |