aforemny / material-components-web-elm / Material.Ripple

Material “ink ripple” interaction effect.

Table of Contents

Resources

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


type Config msg

Ripple configuration

config : Config msg

Default ripple configuration

Configuration Options

setColor : Maybe Color -> Config msg -> Config msg

Specify a ripple effect's color

setAttributes : List (Html.Attribute msg) -> Config msg -> Config msg

Specify additional attributes

Bounded Ripple

bounded : Config msg -> Html msg

Bounded ripple view function

Unbounded Ripple

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

unbounded : Config msg -> Html msg

Unbounded ripple view function

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))


type Color

Ripple effect's color

primary : Color

Primary variant of a ripple effect's color

accent : Color

Accent variant of a ripple effect's color