This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
1.0.0 1.0.1
Simple message alert component.
version 1.0.1
license MIT
native-modules False
elm-version 0.18.0 <= v < 0.19.0
Tag 1.0.2
Committed At 2018-09-13 13:19:13 UTC
elm-lang/html 2.0.0 <= v < 3.0.0 2.0.0
elm-lang/core 5.1.1 <= v < 6.0.0 5.1.1

README

elm-alert-timer-message

A Alert Timer Message component in Elm.

You can pass any Html Msg to component. The Html will be displayed for few seconds and then disapper.

Tip: Add CSS to Html Msg for display hots Alerts.

Usage

The component need a Alert Timer Message Model on your model like this:

    type alias Model =
        { alert_messages : AlertTimerMessage.Model }

The view will be update based on this model. Component expose modelInit for init.

initial : Model
initial =
    Model AlertTimerMessage.modelInit

The Component can be displayed in a view using the AlertTimerMessage.view function. It returns its own message type so you should wrap it in one of your own messages using Html.map:

type Msg
    = ...
    | AlertTimer AlertTimerMessage.Msg
    | ...
view : Model -> Html Msg
view model =
    ...
    div [] [
            Html.map AlertTimer (AlertTimerMessage.view model.alert_messages)
        ]

In order handle Msg in your update function, you should unwrap the AlertTimerMessage.Msg and pass it down to the AlertTimerMessage.update function. The AlertTimerMessage.update function returns the Component Model updated.

update : Msg -> Model -> ( Model, Cmd, Msg )
update msg model =
    case msg of
        ...

        AlertTimer msg ->
            let
                ( updateModal, subCmd ) =
                    AlertTimerMessage.update msg model.alert_messages
            in
                { model | alert_messages = updateModal } ! [ Cmd.map AlertTimer subCmd ]


When you want display message, send a elm message to component like this:

        AddNewMessage ->
            let
                newMsg =
                    AlertTimerMessage.AddNewMessage 10 <| div [] [ text "MSG Teste" ]

                ( updateModal, subCmd ) =
                    AlertTimerMessage.update newMsg model.alert_messages
            in
                { model | alert_messages = updateModal } ! [ Cmd.map AlertTimer subCmd ]

This alert will be displayed for 10 seconds.

Examples

See the examples folder or try it on ellie-app: example1 example.

Thanks for toastr. I used your css on one example.