Snackbar
A material design snackbar written in elm. See the demo
How to create a snackbar
According to Material spec, snackbars should hide themselves. Allowing them to be closed is int he Caution section. We support both options.
To accomplish this and keep consurrent timeouts staight, use the factory functions.
Assume a setup like:
import Snackbar exposing (Snackbar)
type alias Model = {
snackbar: Snackbar
}
type Msg =
SnackMessage (Snackbar.Msg Msg)
| CustomAction
update msg model =
case msg of
SomeAppMessage ->
let
( sb, cmd ) =
Snackbar.message (Snackbar.DefaultDelay) "Hello World!"
in
( { model | snackbar = sb }, Cmd.map SnackMessage cmd )
CustomAction ->
(model, doSomething)
Snackbar with no action button
Snackbar.message (Snackbar.CustomDelay 8000) "I'm a plain message that disappears in 8s."
Snackbar with anchor for action button
Snackbar.link (Snackbar.CustomDelay 8000) "I'm a message with a link to a url" "YO" "http://giphy.com"
Snackbar that sends a message to update for action button
In this case, the action_ref is passed to the Snackbar.Msg of ButtonClick action_ref
. Using this action_ref, an application that could handle multiple actions can distinguish events/intent from different snackbars.
Snackbar.action (Snackbar.CustomDelay 8000) "I'm a message that triggers an action in the app" "WOAH" CustomAction
Snackbar that shows indefinitely
Snackbar.message Snackbar.ShowForever "I'm a plain message that won't go away until explcitly."
Customize Delays
From here - https://material.io/design/components/snackbars.html#behavior
Snackbars appear without warning, and don't require user interaction. They automatically disappear from the screen after a minimum of four seconds, and a maximum of ten seconds.
- Show the snackbar and do not automatically hide it.
Snackbar.ShowForever
- Show the snackbar customize the delay. ex: hide after 6s
Snackbar.CustomDelay 6000
- Use a default value for auto-hiding the snackbar. actions have longer delay so users have time to click.
Snackbar.DefaultDelay
Snackbar.message
default hides after 4sSnackbar.action
default hides after 10sSnackbar.link
default hides after 10s