aforemny/material-components-web-elm/6.0.0

NOTE: the latest version is 9.1.0

Rerouted (regenerated, verified). Same repository and tag, but GitHub now builds the zip with different bytes, so it no longer matches the SHA-1 package.elm-lang.org recorded. The Lamdera package server serves a copy recovered from https://github.com/aforemny/material-components-web-elm.

What we checked: Tag 6.0.0 is still on github.com/aforemny/material-components-web-elm; its commit fa5f16f0eddc is from 2020-10-08 13:01 UTC, before the version was published (2020-10-08 13:03 UTC); every file Elm uses matches a copy in a Lamdera package cache from 2021-02-13, from before the change; elm.json is byte-identical to package.elm-lang.org's; the exposed modules match docs.json; the zip's SHA-1 is not the published one (GitHub's zip no longer comes out byte for byte the same), so the contents were checked instead.

The Lamdera compiler uses this copy and prints a one-line notice saying so. elm itself fails to download this version.

Details · package.elm-lang.org's zip: https://github.com/aforemny/material-components-web-elm/zipball/6.0.0/

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

Default ripple configuration

Configuration Options

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

Specify a ripple effect's color

setAttributes : List (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 variant of a ripple effect's color

Accent variant of a ripple effect's color