panthershark/snackbar/1.0.0

Snackbar

A Material Design Snackbar!

Definition

type Snackbar msg

The Snackbar model

type Msg msg

The Snackbar msgs

= ShowForever
| DefaultDelay
| CustomDelay 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, 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)

Hide the snackbar. You might use it in an update function like this

  { model | snackbar = Snackbar.hidden }
message : AutoHide -> String -> ( Snackbar msg, 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, 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 -> Bool

Tells if the snackbar currently visible.