Material You

Ripple 涟漪指令

涟漪是用于传达组件或交互元素状态的可视化表示。

使用

基本使用

通过给元素添加v-ripple指令使元素点击时拥有涟漪效果。

在模板中：

<template>
    <div class="container">
        <div class="ripple-example" v-ripple>点击</div>
    </div>
</template>

设置颜色

通过对v-ripple中color属性的设置，我们可以修改涟漪的颜色。

ripple 的默认颜色为目标元素的字体颜色

在模板中：

<template>
    <div class="container">
        <div class="ripple-example" 
             v-ripple="{ color: 'var(--md-color-primary)' }">
            点击
        </div>
    </div>
</template>

设置禁用状态

设置v-ripple中disabled属性可以禁用涟漪效果，可以关闭部分组件默认的涟漪。

在模板中：

<template>
    <div class="container">
        <div class="ripple-example" 
             v-ripple="{ disabled: false }">
            点击
        </div>
    </div>
</template>

API

选项

参数说明类型默认值
color涟漪颜色stringcurrentColor
disabled禁用状态booleanfalse
unbounded是否无界booleanfalse