波纹效果(Ripple effect)
made with Vuejs

波纹效果(Ripple effect)

这是一个实现Material设计风格的纹波效果的插件。

相关问答
暂无相关问题
查看全部
简介及使用教程

波纹效果(Ripple effect)是一个实现Material设计风格的纹波效果的插件,支持向任何Vue元素添加Google Material设计波纹效果,无依赖。

安装

Npm

npm i vue-material-design-ripple

Yarn

yarn add vue-material-design-ripple

使用

引入并注册

import Ripple from "vue-material-design-ripple";
import "vue-material-design-ripple/dist/vue-material-design-ripple.css";

Vue.directive("ripple", Ripple);
<div class="clickme" :style="{color}" v-ripple="{center,class: rippleClass}">
        <div class="clickme-text">
          <span class="hash" v-if="showHash">#</span>
          {{btnLabel}}
        </div>
      </div>

示例

波纹效果Ripple effect.gif

波纹效果Ripple effect2.gif

作者

partyka1

相关项目

这是一个基于Vue.js的模拟命令行效果的动画组件。
Vue.js的文本幻灯片组件。
这是一个基于Vue.js的内容切换组件。
这是一个使用Vue.js的加载Spinner的集合。
这是一个基于Vue的emoji图标反馈组件。
这是一个带动画的“喜欢”按钮组件。