aforemny / material-components-web-elm / Material.Snackbar

Snackbars provide brief messages about the application's processes at the bottom of the screen.

Table of Contents

Resources

Basic Usage

import Browser
import Material.Snackbar as Snackbar

type alias Model =
    { queue : Snackbar.Queue Msg }

type Msg
    = SnackbarClosed Snackbar.MessageId

init =
    { queue = Snackbar.initialQueue }

update msg model =
    case msg of
        SnackbarClosed messageId ->
            { model | queue = Snackbar.close messageId model.queue }

view model =
    Snackbar.snackbar
        (Snackbar.config { onClosed = SnackbarClosed })
        model.queue

main =
    Browser.sandbox
        { init = init, update = update, view = view }

Configuration


type Config msg

Configuration of a snackbar

config : { onClosed : MessageId -> msg } -> Config msg

Default configuration of a snackbar

Configuration Options

setCloseOnEscape : Basics.Bool -> Config msg -> Config msg

Specify whether the snackbar's messages should close when the user presses escape

setAttributes : List (Html.Attribute msg) -> Config msg -> Config msg

Specify additional attributes

Snackbar

snackbar : Config msg -> Queue msg -> Html msg

Snackbar view function

Queue

You will have to maintain a queue of snackbar messages inside your application's model. To do so, add a field queue : Queue msg and initialize it to initialQueue.

type alias Model =
    { queue : Snackbar.Queue Msg }

initialModel =
    { queue = Snackbar.initialQueue }

type Msg
    = SnackbarClosed Snackbar.MessageId

Then from your application's update function, call update to handle Snackbar.Msg. Note that the first argument to update is SnackbarMsg.

type Msg
    = SnackbarClosed Snackbar.MessageId

update msg model =
    case msg of
        SnackbarClosed messageId ->
            { model | queue = Snackbar.close messageId model.queue }

Now you are ready to add messages from your application's update function.


type Queue msg

Queue of messages

initialQueue : Queue msg

Initial empty queue


type MessageId

Message identifier type

close : MessageId -> Queue msg -> Queue msg

Hide the currently showing message

Adding Messages

type Msg
    = SnackbarClosed Snackbar.MessageId
    | SomethingHappened

update msg model =
    case msg of
        SomethingHappened ->
            let
                message =
                    Snackbar.message "Something happened"

                newQueue =
                    Snackbar.addMessage message model.queue
            in
            { model | queue = newQueue }

        SnackbarClosed messageId ->
            let
                newQueue =
                    Snackbar.close messageId model.queue
            in
            { model | queue = newQueue }

addMessage : Message msg -> Queue msg -> Queue msg

Adds a message to the queue

Messages

At the minimum, a message contains only a label.

Snackbar.message "Something happened"

message : String -> Message msg

Default snackbar message (empty label)


type Message msg

Snackbar message

setActionButton : Maybe String -> Message msg -> Message msg

Specify a message's action button label

setOnActionButtonClick : (MessageId -> msg) -> Message msg -> Message msg

Specify a message when the user clicks on a message's action button

setActionIcon : Maybe (Icon msg) -> Message msg -> Message msg

Specify a message's action icon

setOnActionIconClick : (MessageId -> msg) -> Message msg -> Message msg

Specify a message when the user clicks on a message's action icon

setLeading : Basics.Bool -> Message msg -> Message msg

Specify whether a message should display leading

Messages are by default centered within the viewport. On larger screens, they can optionally be displyed on the leading edge of the screen. To display a message as leading, set its setLeading configuration option to True.

setStacked : Basics.Bool -> Message msg -> Message msg

Specify whether a message should be stacked

Stacked messages display their label above their action button or icon. This works best for messages with a long label.

setTimeoutMs : Maybe Basics.Int -> Message msg -> Message msg

Specify a message's timeout in milliseconds

Message with Action Button

Messages may contain an action button that the user can click. To display an action button, set the message's setActionButton configuration option to a string, and handle the event in onActionButtonClick.

Snackbar.message "Something happened"
    |> Snackbar.setActionButton (Just "Take action")
    |> Snackbar.setOnActionButtonClick ActionButtonClicked

Message with Action Icon

Messages may contain an action icon that the user can click. To display an action icon, set the message's setActionIcon configuration option to a string representing a Material Icon, and handle the event in onActionIconClick.

Snackbar.message "Something happened"
    |> Snackbar.setActionIcon
        (Just (Snackbar.icon "close"))
    |> Snackbar.setOnActionIconClick Dismissed

Stacked Messages

Messages with a long label and action button should display the action button below the label. To archieve this, set the message's setStacked configuration option to True.

Snackbar.message "Something happened"
    |> Snackbar.setActionButton (Just "Take action")
    |> Snackbar.setStacked True

Leading Messages

Messages are by default centered within the viewport. On larger screens, they can optionally be displyed on the leading edge of the screen. To display a message as leading, set its setLeading configuration option to True.

Snackbar.message "Something happened"
    |> Snackbar.setLeading True

Custom Timeout

To set a custom timeout for a message, set its setTimeoutMs configuration option to a floating point value, representing the on-screen time in milliseconds.

This value must be between 4 and 10 seconds, and it defaults to 5 seconds. You may specify an indefinite timeout by setting it to Nothing.

Snackbar.message "Something happened"
    |> Snackbar.setTimeoutMs (Just 4000)

Message with Custom Icon

This library natively supports Material Icons. However, you may also include SVG or custom icons such as FontAwesome.


type Icon msg

Icon type

icon : String -> Icon msg

Material Icon

Snackbar.message "Something happened"
    |> Snackbar.setActionIcon
        (Just (Snackbar.icon "favorite"))

customIcon : (List (Html.Attribute msg) -> List (Html msg) -> Html msg) -> List (Html.Attribute msg) -> List (Html msg) -> Icon msg

Custom icon

Snackbar.message "Something happened"
    |> Snackbar.setActionIcon
        (Just
            (Snackbar.customIcon Html.i
                [ class "fab fa-font-awesome" ]
                []
            )
        )

svgIcon : List (Svg.Attribute msg) -> List (Svg msg) -> Icon msg

SVG icon

Snackbar.message "Something happened"
    |> Snackbar.setActionIcon
        (Just
            (Snackbar.svgIcon
                [ Svg.Attributes.viewBox "…" ]
                [-- …
                ]
            )
        )