A Material Design Snackbar!
The Snackbar model
The Snackbar msgs
From MD spec - 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.
If you need to customize, you can. The auto-hide in example below is 6 seconds.
Snackbar.CustomDelay 6000
action : AutoHide -> String -> String -> msg -> ( Snackbar msg, Platform.Cmd.Cmd (Msg msg) )
Show a snackbar with a button that issues a msg. DefaultDelay is 10 seconds which gives a user time to click
Snackbar.action DefaultDelay "Your thing was deleted." "UNDO" (UndoDelete)
hidden : Snackbar msg
Hide the snackbar. You might use it in an update function like this
{ model | snackbar = Snackbar.hidden }
link : AutoHide -> String -> String -> String -> ( Snackbar msg, Platform.Cmd.Cmd (Msg msg) )
Show a snackbar with a link to another url. DefaultDelay is 10 seconds which gives a user time to click
Snackbar.link DefaultDelay "Your upload is ready." "GO" "https://path-to-thing"
message : AutoHide -> String -> ( Snackbar msg, Platform.Cmd.Cmd (Msg msg) )
Show a snackbar with only a message. DefaultDelay is 4 seconds
Snackbar.message DefaultDelay "Hi!"
update : Msg msg -> Snackbar msg -> ( Snackbar msg, Platform.Cmd.Cmd (Msg msg) )
Update function for mapping into your app's update
type Msg =
SnackMessage (Snackbar.Msg Msg)
SnackMessage submsg ->
let
( sb, cmd ) =
Snackbar.update submsg model.snackbar
in
( { model | snackbar = sb }, Cmd.map SnackMessage cmd )
view : Snackbar msg -> Html msg
Render a snackbar. Typical usage:
Html.map SnackMessage <| Snackbar.view model.snackbar
visible : Snackbar msg -> Basics.Bool
Tells if the snackbar currently visible.