Vuetify 2 has reached EOL and is no longer actively maintained. Upgrade to Vuetify 3 or learn more about Vuetify 2 EOL.

# Ripple directive

v-ripple ディレクティブはユーザのアクションを表示するために使用されます。 これは、任意のブロックレベル要素に適用できます。 v-btn, v-tabs-item など、多くのコンポーネントに ripple ディレクティブが組み込まれています。

# 使い方

基本的なリップル(波紋効果)は、コンポーネントまたはHTML要素でv-rippleディレクティブを使用するだけで有効にできます。

# API

# サンプル

# オプション

# Center

centerオプションを使用すると、リップルは常にターゲットの中心から発生します。

# その他

# 色の変更

Helperクラスを利用すれば波紋の色を変更できます。

# コンポーネント内のリップル

リップル効果を制御するripple プロパティを提供するコンポーネントもあります。 class または center オプションを使用し、無効にしたり、動作をカスタマイズすることができます。

準備はできましたか?

Vuetifyのチームが選ぶ関連コンテンツで他の学習トピックに進むか、下のナビゲーション リンクでページ間を移動できます。
GitHub でこのページを編集する
最終更新日:03/12/2025, 5:21:30 PM