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 (Attribute msg) -> List (Html msg) -> Html msg

Show an elert using primary color.

attributes - List of attributes to customize the alert container
children - List of child html elements

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

Show an elert using secondary color.

attributes - List of attributes to customize the alert container
children - List of child html elements

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

Show an elert using success color.

attributes - List of attributes to customize the alert container
children - List of child html elements

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

Show an elert using info color.

attributes - List of attributes to customize the alert container
children - List of child html elements

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

Show an elert using warning color.

attributes - List of attributes to customize the alert container
children - List of child html elements

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

Show an elert using danger color.

attributes - List of attributes to customize the alert container
children - List of child html elements

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

Show an elert using light color.

attributes - List of attributes to customize the alert container
children - List of child html elements

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

Show an elert using dark color.

attributes - List of attributes to customize the alert container
children - List of child html elements

Helpers

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

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

To get proper link colors for a elements use this function

attributes List of attributes for the link element
children List of child elements

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

Alert h1 header with appropriate color styling

attributes List of attributes
children List of child elements

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

Alert h2 header with appropriate color styling

attributes List of attributes
children List of child elements

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

Alert h3 header with appropriate color styling

attributes List of attributes
children List of child elements

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

Alert h3 header with appropriate color styling

attributes List of attributes
children List of child elements

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

Alert h5 header with appropriate color styling

attributes List of attributes
children List of child elements

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

Alert h6 header with appropriate color styling

attributes List of attributes
children List of child elements

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.shownn} )


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.

visibility The current visibility for the alert.
config Configuration settings and child elements for your alert.

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) -> 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

rundis/elm-bootstrap/4.0.0