メニュー

波は、マテリアル デザインで概説されているインク効果を作成できるように、マテリアライズに含めた外部ライブラリです。

Waves の適用

waves 効果は任意の要素に適用できます。waves 効果をボタンに適用するには、waves-effect クラスをボタンに適用するだけです。波の効果を白くしたい場合は、waves-effect waves-lightの両方をクラスとして追加します。


  <a class="waves-effect waves-light btn-large" href="#">Wave</a>
      

カスタマイズ

waves をカスタマイズするにはいくつかの方法があり、作成済みのクラスを使用することも、新しいクラスを作成して独自の色を定義することもできます。

利用可能な色

これらを使用するには、対応するクラスをボタンに追加するだけです。ボタンの背景色と波の効果を変更して、멋なものを作成してみましょう!


  <a href="#!" class="btn waves-effect waves-teal">Send</a>
          
デフォルト送信
waves-light送信
waves-red送信
waves-yellow送信
waves-orange送信
waves-purple送信
waves-green送信
waves-teal送信
カスタムカラー

必要な色が利用できない場合は、カスタム CSS クラスを作成することで簡単に独自の waves カラーを作成できます。茶色の waves 効果を追加する次の例を参照してください。


  /*
  When creating your CSS selector,
  change "brown" to something of your choosing
  */
  .waves-effect.waves-brown .waves-ripple {
   /* The alpha value allows the text and background color
   of the button to still show through. */
    background-color: rgba(121, 85, 72, 0.65);
  }
          

波が長方形以外の形に形成されるようにする場合は、円形の波のオプションがあります。waves-effectに追加してwaves-circleを追加するだけです。

HTML マークアップ

  <a href="#!" class="waves-effect waves-circle waves-light btn-floating secondary-content">
    <i class="material-icons">add</i>
  </a>
          
デフォルトadd
waves-lightadd