Material “ink ripple” interaction effect.
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
]
Ripple configuration
config : Config msg
Default ripple configuration
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 : Config msg -> Html msg
Bounded ripple view function
Html.span []
[ text "🙌"
, Ripple.unbounded Ripple.config
]
unbounded : Config msg -> Html msg
Unbounded ripple view function
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))
Ripple effect's color
primary : Color
Primary variant of a ripple effect's color
accent : Color
Accent variant of a ripple effect's color