Vue.jsコンポーネントにマテリアルリップルを追加する

getdocs

3年前

今週はVue.jsニュースにとってかなり遅い週だったように見えるかもしれませんが、少なくとも1つの重要で重要なライブラリが明らかになりました。そのライブラリはvue-ripple-directiveです！一度使用すると、それなしでどのように生活したのか不思議に思うでしょう。シンプルなディレクティブで任意のコンポーネントにマテリアルデザインリップルを追加する機能をアプリに提供します。

始める準備はできましたか？

インストール

YarnまたはNPMを介してvue-ripple-directiveをインストールします。

# Yarn
$ yarn add vue-ripple-directive

# NPM
$ npm install vue-ripple-directive --save

次に、ディレクティブを登録します。

main.js

import Vue from 'vue';
import Ripple from 'vue-ripple-directive';
import App from 'App.vue';

// Register the ripple directive.
Vue.directive('ripple', Ripple);

new Vue({
  el: '#app',
  render: h => h(App)
});

波紋の追加

v-ripple ディレクティブを使用して、任意のコンポーネントにリップルを追加できるようになりました。

<button v-ripple>Button Example</button>

そして色をカスタマイズします：

<button v-ripple="'rgba(200, 10, 10, 0.2)'">Creepy Red Button Example</button>

遷移速度を変更します。

<button v-ripple.200>ReallyFastButtonExample</button>

または、マウスオーバーでトリガーすることもできます。

<button v-ripple.mouseover>C'mere mouse! (Example)</button>