波纹指令

v-ripple 指令被用于显示用户的操作。它可以应用于任何块级元素。许多组件都带有内置的波纹指令，比如 v-btn、v-tabs-item 等等。

用例

只要在组件或 HTML 元素上使用 v-ripple 指令，就可以启用基本的波纹功能

template

<template>
  <div
    v-ripple
    class="text-center elevation-2 pa-12 headline"
  >
    HTML element with v-ripple
  </div>
</template>

API

从下面选择您想要的组件，并查看可用的属性、插槽、事件和函数。

示例

下面是一些简单到复杂的例子。

自定义色彩

您可以使用辅助器类改变波纹的颜色。

template

<template>
  <v-list>
    <v-list-item
      v-for="color in ['primary', 'secondary', 'info', 'success', 'warning', 'error']"
      :key="color"
      v-ripple="{ class: `${color}--text` }"
    >
      <v-list-item-title>Item with "{{ color }}" class</v-list-item-title>
    </v-list-item>
  </v-list>
</template>

居中波纹

当使用 center 选项时，始终会从目标的中心处产生波纹。

template

<template>
  <div
    v-ripple="{ center: true }"
    class="text-center elevation-2 pa-12 headline"
  >
    HTML element with centered ripple
  </div>
</template>

组件中的波纹

有些组件提供了 ripple 属性，允许您控制波纹效果。 您可以使用 class 或 center 选项关闭它或提供自定义行为。

template

<template>
  <v-row
    class="py-12"
    justify="space-around"
  >
    <v-btn
      color="primary"
    >
      With ripple (default)
    </v-btn>
    <v-btn
      :ripple="false"
      color="primary"
    >
      Without ripple
    </v-btn>
    <v-btn
      :ripple="{ center: true }"
      color="primary"
    >
      With centered ripple
    </v-btn>
    <v-btn
      :ripple="{ class: 'red--text' }"
      text
    >
      With red ripple
    </v-btn>
  </v-row>
</template>