M3 Ripple for Vue

https://github.com/swuerpy/m3ripple-vue
Admin
m3ripple-vue brings the Material Design 3 (You) Ripple Effect, including customizable sparkles and...
Tokens:3,872
Snippets:18
Trust Score:4.1
License:MIT
Update:11 months ago
Show doc for...
Tokens:
Raw
### Install m3ripple-vue Package

Source: https://github.com/swuerpy/m3ripple-vue/blob/main/README.md

These commands show how to install the m3ripple-vue package using various package managers like npm, pnpm, yarn, and bun. It's the first step before using the component in your Vue project.

```bash
# npm
npm install m3ripple-vue

# pnpm
pnpm add m3ripple-vue

# yarn
yarn add m3ripple-vue

# bun
bun add m3ripple-vue
```

--------------------------------

### Vue: Global Plugin Installation

Source: https://context7.com/swuerpy/m3ripple-vue/llms.txt

Explains how to install the m3ripple-vue component globally in a Vue application using `app.use()`. This allows the `Ripple` component to be used in any child component without needing individual imports, simplifying development.

```typescript
// main.ts
import { createApp } from "vue";
import App from "./App.vue";
import m3ripple from "m3ripple-vue";
import "m3ripple-vue/style.css";

const app = createApp(App);

// Install globally
app.use(m3ripple);

app.mount("#app");

```

```vue
<!-- Any component in your app -->
<template>
  <button class="my-button">
    <!-- No import needed, component is globally registered -->
    Click Me!
    <Ripple />
  </button>
</template>

<style>
.my-button {
  position: relative;
  padding: 12px 24px;
  border-radius: 8px;
  background-color: #009688;
  color: white;
  border: none;
  cursor: pointer;
}
</style>
```

--------------------------------

### Vue Card with Interactive Ripple Effect

Source: https://github.com/swuerpy/m3ripple-vue/blob/main/README.md

This Vue example demonstrates how to apply the `<Ripple />` component to a `<div>` element to create an interactive card with a ripple effect. It emphasizes that the parent `div` must have `position: relative` and shows how to add content within the card.

```vue
<div class="demo-card">
  <h3>Interactive Card</h3>
  <p>Click anywhere on this card.</p>
  <Ripple />
</div>

<style>
.demo-card {
  position: relative;
  border-radius: 16px;
  background: hsla(0, 0%, 100%, 0.06);
  cursor: pointer;
}
</style>
```

--------------------------------

### Vue Button with Ripple Effect

Source: https://github.com/swuerpy/m3ripple-vue/blob/main/README.md

A simple Vue example showcasing the `<Ripple />` component applied to a basic button. This snippet focuses on the integration of the ripple effect within a standard button element, requiring the button to have `position: relative`.

```vue
<button class="demo-button">
  Click me!
  <Ripple />
</button>

<style>
.demo-button {
  position: relative;
  border-radius: 20px;
}
</style>
```

--------------------------------

### Basic Vue Usage of Ripple Component

Source: https://github.com/swuerpy/m3ripple-vue/blob/main/README.md

This Vue component example demonstrates how to import and use the `<Ripple />` component within a button. It highlights the necessity of importing the component and its associated styles, as well as setting the parent element's CSS `position` property to `relative` for correct ripple effect positioning.

```vue
<script setup lang="ts">
import { Ripple } from "m3ripple-vue";
// Import the required styles
import "m3ripple-vue/style.css";
</script>

<template>
  <button class="my-button">
    Click Me!
    <Ripple />
  </button>
</template>

<style>
.my-button {
  /* This is required for the ripple to position correctly */
  position: relative;

  /* Your other styles */
  border-radius: 20px;
  padding: 12px 24px;
  border: none;
  background-color: #3f51b5;
  color: white;
  cursor: pointer;
}
</style>
```

--------------------------------

### Vue with TypeScript: Using Ripple Component Props

Source: https://context7.com/swuerpy/m3ripple-vue/llms.txt

Illustrates how to use the `Ripple` component in a Vue application with TypeScript, demonstrating the use of various props like `isMaterial3`, `rippleColor`, and custom callback functions (`beforeRippleFn`). This example showcases type safety when passing props and handling events.

```vue
<script setup lang="ts">
import { Ripple } from "m3ripple-vue";
import type { MouseEvent, TouchEvent } from "vue";

const handleRippleStart = (event: MouseEvent | TouchEvent) => {
  console.log("Ripple effect started");
};
</script>

<template>
  <button class="typed-button">
    TypeScript Example
    <Ripple
      :isMaterial3="true"
      :beforeRippleFn="handleRippleStart"
      rippleColor="#ff5722aa"
      sparklesColorRGB="255 87 34"
      opacity_level1="0.25"
      opacity_level2="0.12"
      :sparklesMaxCount="3000"
    />
  </button>
</template>

<style>
.typed-button {
  position: relative;
  padding: 14px 28px;
  border-radius: 12px;
  background-color: #ff5722;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
}
</style>
```

--------------------------------

### Vue: Basic Ripple Component Integration

Source: https://context7.com/swuerpy/m3ripple-vue/llms.txt

Integrates the basic Ripple component from m3ripple-vue into a Vue 3 application. Ensure the parent element has a `position` CSS property set to `relative`, `absolute`, `fixed`, or `sticky`. This example demonstrates a standard button with a ripple effect.

```vue
<script setup lang="ts">
import { Ripple } from "m3ripple-vue";
import "m3ripple-vue/style.css";
</script>

<template>
  <button class="my-button">
    Click Me!
    <Ripple />
  </button>
</template>

<style>
.my-button {
  position: relative;
  border-radius: 20px;
  padding: 12px 24px;
  border: none;
  background-color: #3f51b5;
  color: white;
  cursor: pointer;
}
</style>
```

--------------------------------

### Vue Ripple Component Style Variants

Source: https://github.com/swuerpy/m3ripple-vue/blob/main/README.md

This Vue snippet illustrates how to customize the ripple effect using props on the `<Ripple />` component. It shows examples for enabling Material 2 ripple behavior (`isMaterial3='false'`), changing the ripple color (`rippleColor`), and modifying the sparkles color (`sparklesColorRGB`).

```vue
<button class="demo-button">
  M2 Ripple
  <Ripple :isMaterial3="false" />
</button>

<button class="demo-button">
  Purple Ripple
  <Ripple rippleColor="#8e44ad80" />
</button>

<button class="demo-button">
  Blue Sparkles
  <Ripple sparklesColorRGB="52, 152, 219" />
</button>
```

--------------------------------

### Vue: Execute Logic Before Ripple Animation

Source: https://context7.com/swuerpy/m3ripple-vue/llms.txt

Demonstrates how to use the `beforeRippleFn` callback in Vue to execute custom logic, such as updating component state or logging event details, just before the ripple animation begins. This is useful for synchronizing animations or state changes with user interactions.

```vue
<script setup lang="ts">
import { ref } from "vue";
import { Ripple } from "m3ripple-vue";
import "m3ripple-vue/style.css";

const isPressed = ref(false);
const clickCount = ref(0);

const handleBeforeRipple = (event: MouseEvent | TouchEvent) => {
  isPressed.value = true;
  clickCount.value++;

  setTimeout(() => {
    isPressed.value = false;
  }, 200);

  console.log("Ripple triggered at:", {
    x: event instanceof MouseEvent ? event.clientX : event.touches[0].clientX,
    y: event instanceof MouseEvent ? event.clientY : event.touches[0].clientY,
    timestamp: Date.now()
  });
};
</script>

<template>
  <div class="container">
    <button
      :class="['interactive-button', { pressed: isPressed }]"
    >
      Clicked {{ clickCount }} times
      <Ripple
        :beforeRippleFn="handleBeforeRipple"
        rippleColor="rgba(255, 255, 255, 0.3)"
      />
    </button>
  </div>
</template>

<style>
.interactive-button {
  position: relative;
  border-radius: 16px;
  padding: 16px 32px;
  background-color: #2196F3;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  transition: box-shadow 0.2s, transform 0.1s;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.interactive-button.pressed {
  transform: scale(0.98);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.interactive-button:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}
</style>
```

--------------------------------

### TypeScript: Ripple Component Props Interface

Source: https://context7.com/swuerpy/m3ripple-vue/llms.txt

Provides the TypeScript interface `RippleProps` which defines all available props for the `Ripple` component. This includes detailed type definitions and default values for properties like `isMaterial3`, `rippleColor`, `sparklesColorRGB`, and more, facilitating type-safe usage in TypeScript projects.

```typescript
interface RippleProps {
  // Enable Material 3 style (with sparkles) or Material 2 style (simple ripple)
  isMaterial3?: boolean; // default: true

  // Callback executed before ripple animation starts
  beforeRippleFn?: (event: MouseEvent | TouchEvent) => void; // default: () => {}

  // Color of the ripple circle (use rgba/hsla for transparency)
  rippleColor?: string; // default: "#ffffff35"

  // RGB color for sparkles (space-separated, e.g., "255 128 0")
  sparklesColorRGB?: string; // default: "255 255 255"

  // Opacity level 1 for sparkles before they disappear
  opacity_level1?: string; // default: "0.2"

  // Opacity level 2 for sparkles just before they disappear
  opacity_level2?: string; // default: "0.1"

  // Maximum number of sparkle particles to render
  sparklesMaxCount?: number; // default: 2048
}

```

--------------------------------

### Vue: Advanced Sparkle Customization

Source: https://context7.com/swuerpy/m3ripple-vue/llms.txt

Fine-tunes the appearance and performance of Material 3 sparkles using advanced props. `sparklesMaxCount` limits the number of sparkles, `sparklesColorRGB` sets their color, and `opacity_level1`/`opacity_level2` control transparency for different ripple stages, enabling optimized visual effects.

```vue
<template>
  <button class="sparkle-button">
    High Density Sparkles
    <Ripple
      :sparklesMaxCount="4096"
      sparklesColorRGB="255 215 0"
      opacity_level1="0.3"
      opacity_level2="0.15"
      rippleColor="rgba(255, 215, 0, 0.2)"
    />
  </button>

  <button class="subtle-button">
    Subtle Sparkles
    <Ripple
      :sparklesMaxCount="512"
      sparklesColorRGB="200 200 255"
      opacity_level1="0.1"
      opacity_level2="0.05"
      rippleColor="rgba(200, 200, 255, 0.15)"
    />
  </button>
</template>

<style>
.sparkle-button {
  position: relative;
  border-radius: 24px;
  padding: 16px 32px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: white;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin: 8px;
}

.subtle-button {
  position: relative;
  border-radius: 24px;
  padding: 16px 32px;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  border: none;
  color: white;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin: 8px;
}
</style>
```

--------------------------------

### Vue: Custom Ripple and Sparkle Colors

Source: https://context7.com/swuerpy/m3ripple-vue/llms.txt

Demonstrates how to customize the ripple and sparkle colors using various color formats like `rgba`, `hsla`, or RGB values. The `rippleColor` prop controls the main ripple, while `sparklesColorRGB` customizes the sparkle color, allowing for distinct visual themes.

```vue
<template>
  <button class="purple-button">
    Purple Ripple
    <Ripple rippleColor="#8e44ad80" />
  </button>

  <button class="green-button">
    Green Ripple
    <Ripple rippleColor="rgba(46, 204, 113, 0.5)" />
  </button>

  <button class="blue-button">
    Blue with Custom Sparkles
    <Ripple
      rippleColor="rgba(52, 152, 219, 0.3)"
      sparklesColorRGB="52 152 219"
    />
  </button>
</template>

<style>
.purple-button, .green-button, .blue-button {
  position: relative;
  border-radius: 12px;
  padding: 12px 24px;
  margin: 8px;
  border: none;
  cursor: pointer;
}

.purple-button {
  background-color: #8e44ad;
  color: white;
}

.green-button {
  background-color: #2ecc71;
  color: white;
}

.blue-button {
  background-color: #3498db;
  color: white;
}
</style>
```

--------------------------------

### Vue: Material 2 Style Ripple Effect

Source: https://context7.com/swuerpy/m3ripple-vue/llms.txt

Applies a classic Material 2 ripple effect without the animated sparkles by setting the `isMaterial3` prop to `false` on the `Ripple` component. This provides a simpler ripple animation suitable for older Material Design implementations.

```vue
<template>
  <button class="demo-button">
    Material 2 Style
    <Ripple :isMaterial3="false" />
  </button>
</template>

<style>
.demo-button {
  position: relative;
  border-radius: 8px;
  padding: 10px 20px;
  background-color: #6200ea;
  color: white;
  border: none;
  cursor: pointer;
}
</style>
```

--------------------------------

### Vue: Ripple Effect on Non-Button Elements (Cards)

Source: https://context7.com/swuerpy/m3ripple-vue/llms.txt

Applies the ripple effect to a non-button HTML element, such as a `div` representing a card. This showcases the flexibility of the `Ripple` component, allowing interactive feedback on various UI elements beyond standard buttons.

```vue
<template>
  <div class="card">
    <img src="/product.jpg" alt="Product" class="card-image" />
    <div class="card-content">
      <h3>Product Title</h3>
      <p>Product description goes here</p>
      <span class="price">$99.99</span>
    </div>
    <Ripple rippleColor="rgba(255, 255, 255, 0.2)" />
  </div>
</template>

<style>
.card {
  position: relative;
  border-radius: 16px;
  background: #1e1e1e;
  overflow: hidden;
  cursor: pointer;
  width: 300px;
  transition: transform 0.2s;
}

.card:hover {
  transform: translateY(-4px);
}

.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-content {
  padding: 16px;
  color: white;
}

.price {
  font-size: 20px;
  font-weight: bold;
  color: #4CAF50;
}
</style>
```
Tokens:
Raw