Material “ink ripple” interaction effect.

Table of Contents

• Resources
• Basic Usage
• Configuration
  • Configuration Options
• Bounded Ripple
• Unbounded Ripple
• Colored Ripple

Resources

• Demo: Ripples
• Material Design Guidelines: States
• MDC Web: Ripple
• Sass Mixins (MDC Web)

Basic Usage

Ripples come in two variants. Use bounded for bounded ripple effects which work best when used for contained surfaces, and unbounded for unbounded ripple effects which work best with icons.

import Material.Ripple as Ripple


main =
    Html.div []
        [ text "Click me!"
        , Ripple.bounded Ripple.config
        ]

Configuration

Configuration Options

Bounded Ripple

Unbounded Ripple

Html.span []
    [ text "🙌"
    , Ripple.unbounded Ripple.config
    ]

Colored Ripple

If you want to set the ripple effect to either primary or accent color, use its setColor configuration option and specify a Color.

Ripple.bounded
    (Ripple.config |> Ripple.setColor (Just Ripple.primary))