Ripple

v-ripple Vue Directive for MDC Ripple - MDC Web (Material Components for Web).

Usage

npm install @vueable-material/ripple --save

Use in Vue Component

import { Ripple } from '@vueable-material/ripple';

export default {
    directives: {
        Ripple,
    },
};

Define HTML and use MDC Web CSS/SCCSS

<template>
    <div>
        <div
            class="mdc-ripple-surface mdc-typography mdc-typography--caption"
            v-ripple
        >
            Ripple Text!
        </div>
    </div>
</template>
<style>
    .mdc-ripple-surface {
        padding: 8px;
    }
</style>

Examples

See working examples at https://surevelox.github.io/vueable-material/