EdutainmentLIVE / elm-bootstrap / Bootstrap.Alert

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Simple alerts

When you just need a simple alert, these shorthand functions lets you quickly display an alert.

    simplePrimary [] [ text "I'm a simple alert!" ]

    simpleWarning
        [ class "myCustomAlertClass" ]
        [ Alert.h1 [] [ text "Alert heading" ]
        , p [] [ text "Some alert content." ]
        , Alert.link [ href "#somewhere" ] [ text "Styled link" ]
        ]

simplePrimary : List (Html.Attribute msg) -> List (Html msg) -> Html msg

Show an elert using primary color.

simpleSecondary : List (Html.Attribute msg) -> List (Html msg) -> Html msg

Show an elert using secondary color.

simpleSuccess : List (Html.Attribute msg) -> List (Html msg) -> Html msg

Show an elert using success color.

simpleInfo : List (Html.Attribute msg) -> List (Html msg) -> Html msg

Show an elert using info color.

simpleWarning : List (Html.Attribute msg) -> List (Html msg) -> Html msg

Show an elert using warning color.

simpleDanger : List (Html.Attribute msg) -> List (Html msg) -> Html msg

Show an elert using danger color.

simpleLight : List (Html.Attribute msg) -> List (Html msg) -> Html msg

Show an elert using light color.

simpleDark : List (Html.Attribute msg) -> List (Html msg) -> Html msg

Show an elert using dark color.

Helpers

These functions allow you to create alert children with alert specific styling

link : List (Html.Attribute msg) -> List (Html msg) -> Html msg

To get proper link colors for a elements use this function

h1 : List (Html.Attribute msg) -> List (Html msg) -> Html msg

Alert h1 header with appropriate color styling

h2 : List (Html.Attribute msg) -> List (Html msg) -> Html msg

Alert h2 header with appropriate color styling

h3 : List (Html.Attribute msg) -> List (Html msg) -> Html msg

Alert h3 header with appropriate color styling

h4 : List (Html.Attribute msg) -> List (Html msg) -> Html msg

Alert h3 header with appropriate color styling

h5 : List (Html.Attribute msg) -> List (Html msg) -> Html msg

Alert h5 header with appropriate color styling

h6 : List (Html.Attribute msg) -> List (Html msg) -> Html msg

Alert h6 header with appropriate color styling

Dismissable alerts

Dismissable alerts are also supported. You can even configure them to have a fade out animation when dismissed. Unlike it's Twitter Bootstrap JavaScript counterpart we can't remove the alert element from the DOM. It's simply set to display:none. To support dismissable alerts you must keep track of the alerts visibility in your model.

type alias Model =
    { alertVisibility : Alert.Visibility }

type Msg
    = AlertMsg Alert.Visibility

init : ( Model, Cmd Msg )
init =
    ( { alertVisibility = Alert.shown }
    , Cmd.none
    )

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        AlertMsg visibility ->
            ( { model | alertVisibility = visibility }, Cmd.none )

view : Model -> Html Msg
view model =
    Alert.config
        |> Alert.dismissableWithAnimation AlertMsg
        |> Alert.info
        |> Alert.children
            [ Alert.h4 [] [ text "Alert heading" ]
            , Alert.text "This info message has a "
            , Alert.link [ href "javascript:void()" ] [ text "link" ]
            , Alert.p [] [ text "Followed by a paragraph behaving as you'd expect." ]
            ]
        |> Alert.view model.alertVisibility


-- Subscriptions are only needed when you choose to use dismissableWithAnimation
subscriptions : Model -> Sub Msg
subscriptions model =
    Alert.subscriptions model.alertVisibility AlertMsg

Configure

config : Config msg

Create a default config for an alert.

view : Visibility -> Config msg -> Html msg

Call the view function to turn an alert config into an Elm Html element.

children : List (Html msg) -> Config msg -> Config msg

Configure child elements for the alert.


type Config msg

Opaque type used for describing the configuration of an alert.

Visibility

shown : Visibility

Use this function to represent the shown state for an alert.

closed : Visibility

Use this function to represent the closed/dismissed state for an alert.


type Visibility

Opaque type used to represent whether to display the alert or not.

Contextual alerts

primary : Config msg -> Config msg

Configure alert to use primary colors.

secondary : Config msg -> Config msg

Configure alert to use secondary colors.

success : Config msg -> Config msg

Configure alert to use success colors.

info : Config msg -> Config msg

Configure alert to use info colors.

warning : Config msg -> Config msg

Configure alert to use warning colors.

danger : Config msg -> Config msg

Configure alert to use danger colors.

light : Config msg -> Config msg

Configure alert to use light colors.

dark : Config msg -> Config msg

Configure alert to use dark colors.

Dismiss with/without Animation

dismissable : (Visibility -> msg) -> Config msg -> Config msg

Make the alert dismissable. Adds a close icon top right. You'll need to handle the msg in your update function.

type Msg
    = AlertMsg Alert.Visibilty

-- somewhere in your view function where you display the alert
Alert.config
    |> Alert.dismissable AlertMsg
    |> ... etc

dismissableWithAnimation : (Visibility -> msg) -> Config msg -> Config msg

Enable a fade out animation when closing/dismissing an Alert.

subscriptions : Visibility -> (Visibility -> msg) -> Platform.Sub.Sub msg

Subscription for handling animations. Don't forget this when configuring your alert to be dismissable with animation.

subscriptions : Model -> Sub Msg
subscriptions model =
    Alert.subscriptions model.alertVisibility AlertMsg