리플 디렉티브 (Ripple directive)

v-ripple 디렉티브는 사용자의 액션을 보여주는데 사용됩니다. 이 디렉티브는 어떤 블록 레벨 요소에든 적용될 수 있습니다. 다양한 컴포넌트들이 리플 디렉트브와 함께 사용될 수 있습니다. 예르 들어 v-btn, v-tabs-item 등과 더 많은 다양한 내장 컴포넌트들이 있습니다.

사용법

Basic ripple functionality can be enabled just by using v-ripple directive on a component or an HTML element

API

v-ripple
이름
value
디폴트
{}
타입
Object

Directives.Ripples.

예제

커스텀 색상 (Custom color)

헬퍼 클래스를 사용하여 리플의 색을 바꿀 수 있습니다.

Centered ripple

When a center option is used ripple will always originate from the center of the target.

Ripple in components

Some components provide the ripple prop that allows you to controll the ripple effect. You can turn it off or customize the behaviour by using class or center options.

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore