Material波纹（Ripples）

Material波纹效果可以通过v-rippleQuasar指令轻松添加到任何DOM元素（或元件）。 遵循以下步骤：

1.确保您的DOM元素或组件具有position: relative的CSS或者附加relative-position的Quasar CSS辅助类。

2.给它添加v-ripple指令。

波纹的颜色由DOM元素的文本颜色（CSS ‘color’ 属性）决定。

安装

编辑 /quasar.conf.js:

framework: {
  directives: ['Ripple']
}

基本用法

<div class="relative-position" v-ripple>
  ....
</div>

只触发一个Quasar主题

为此，您需要指定mat或ios指令修饰符，如下所示：

<!-- Only for Quasar Material theme -->
<div v-ripple.mat class="relative-position">...</div>

<!-- Only for Quasar iOS theme -->
<div v-ripple.ios class="relative-position">...</div>

动态禁用

如果由于某种原因，您有一个需要禁用波纹的场景，则可以为该指令分配一个布尔值作为值。

<template>
  <div
    v-ripple="rippleEnabled"
    class="relative-position"
  >
    <q-checkbox
      v-model="rippleEnabled"
      label="Enable Ripples"
    />
    .....
  </div>
</template>

<script>
export default {
  data () {
    return {
      rippleEnabled: true
    }
  }
}
</script>

当你的Vue作用域变量rippleEnabled变为布尔false时，波纹将被禁用。
你也可以将它与mat和ios修饰符结合使用。

地址栏颜色 间距