Ripple

TIP

Code source: https://varlet.gitee.io/varlet-ui/#/zh-CN/ripple

Creates a ripple effect upon clicking an element.

Basic

Example Code

<template>
  <el-button v-ripple type="success" style="width: 200px; height: 80px">Click me</el-button>
</template>
<script lang="ts" setup>
import { vRipple } from 'element-plus-plus'
</script>

Changing the Color

Example Code

<template>
  <el-button v-ripple="{ color: 'blue' }" type="success" style="width: 200px; height: 80px">Click me</el-button>
</template>
<script lang="ts" setup>
import { vRipple } from 'element-plus-plus'
</script>

Disabling the Ripple

Example Code

<template>
  <el-button v-ripple="{ disabled: true }" type="success" style="width: 200px; height: 80px">Click me</el-button>
</template>
<script lang="ts" setup>
import { vRipple } from 'element-plus-plus'
</script>

Attributes

Parameter	Description	Type	Optional Values	Default Value
color	Color	string	—	currentColor
disabled	Disabled state	boolean	-	false