Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
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.
attributes
- List of attributes to customize the alert containerchildren
- List of child html elementssimpleSecondary : List (Html.Attribute msg) -> List (Html msg) -> Html msg
Show an elert using secondary color.
attributes
- List of attributes to customize the alert containerchildren
- List of child html elementssimpleSuccess : List (Html.Attribute msg) -> List (Html msg) -> Html msg
Show an elert using success color.
attributes
- List of attributes to customize the alert containerchildren
- List of child html elementssimpleInfo : List (Html.Attribute msg) -> List (Html msg) -> Html msg
Show an elert using info color.
attributes
- List of attributes to customize the alert containerchildren
- List of child html elementssimpleWarning : List (Html.Attribute msg) -> List (Html msg) -> Html msg
Show an elert using warning color.
attributes
- List of attributes to customize the alert containerchildren
- List of child html elementssimpleDanger : List (Html.Attribute msg) -> List (Html msg) -> Html msg
Show an elert using danger color.
attributes
- List of attributes to customize the alert containerchildren
- List of child html elementssimpleLight : List (Html.Attribute msg) -> List (Html msg) -> Html msg
Show an elert using light color.
attributes
- List of attributes to customize the alert containerchildren
- List of child html elementssimpleDark : List (Html.Attribute msg) -> List (Html msg) -> Html msg
Show an elert using dark color.
attributes
- List of attributes to customize the alert containerchildren
- List of child html elementsThese 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
attributes
List of attributes for the link elementchildren
List of child elementsh1 : List (Html.Attribute msg) -> List (Html msg) -> Html msg
Alert h1 header with appropriate color styling
attributes
List of attributeschildren
List of child elementsh2 : List (Html.Attribute msg) -> List (Html msg) -> Html msg
Alert h2 header with appropriate color styling
attributes
List of attributeschildren_
List of child elementsh3 : List (Html.Attribute msg) -> List (Html msg) -> Html msg
Alert h3 header with appropriate color styling
attributes
List of attributeschildren_
List of child elementsh4 : List (Html.Attribute msg) -> List (Html msg) -> Html msg
Alert h3 header with appropriate color styling
attributes
List of attributeschildren_
List of child elementsh5 : List (Html.Attribute msg) -> List (Html msg) -> Html msg
Alert h5 header with appropriate color styling
attributes
List of attributeschildren_
List of child elementsh6 : List (Html.Attribute msg) -> List (Html msg) -> Html msg
Alert h6 header with appropriate color styling
attributes
List of attributeschildren_
List of child elementsDismissable 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
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.
Opaque type used for describing the configuration of an alert.
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.
Opaque type used to represent whether to display the alert or not.
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.
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