Snackbars provide brief messages about the application's processes at the bottom of the screen.
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 of a snackbar
config : { onClosed : MessageId -> msg } -> Config msg
Default configuration of a snackbar
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 : Config msg -> Queue msg -> Html msg
Snackbar view function
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.
Queue of messages
initialQueue : Queue msg
Initial empty queue
Message identifier type
close : MessageId -> Queue msg -> Queue msg
Hide the currently showing message
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
At the minimum, a message contains only a label.
Snackbar.message "Something happened"
message : String -> Message msg
Default snackbar message (empty label)
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
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
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
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
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
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)
This library natively supports Material Icons. However, you may also include SVG or custom icons such as FontAwesome.
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 "…" ]
[-- …
]
)
)