panthershark / snackbar / Snackbar

A Material Design Snackbar!

Definition


type Snackbar msg

The Snackbar model


type Msg msg

The Snackbar msgs


type AutoHide
    = ShowForever
    | DefaultDelay
    | CustomDelay Basics.Float

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

Show / Hide Snackbars

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!"

Integrate with an application

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

Utils

visible : Snackbar msg -> Basics.Bool

Tells if the snackbar currently visible.