Alert component
This component has a stateless and a stateful API
https://ant.design/components/alert/
Alerts inform your users of relevant information.
An Alert
is what is returned when you create an alert component
You can customize alerts.
To turn an Alert
into Html msg
call toHtml
The kind of alert. Determines the colors used for background and border.
The following functions allow you to simply plop in an alert that never emits Msg
s. If you want to control their visibility, you would have to do so on your own.
alert : String -> Alert msg
Create an alert.
alert "Hello, world!"
withType : AlertType -> Alert msg -> Alert msg
Change the type of the alert. By default, alerts are Success types.
alert "Error! Something went wrong!"
|> withType Error
|> toHtml
withDescription : String -> Alert msg -> Alert msg
Provide a descriptive label / header to your alert, which will be rendered in bigger / emphasized text.
alert "Very long alert that may require a more succinct label / summary"
|> withDescription "Invalid Password"
|> toHtml
toHtml : Alert msg -> Html msg
Convert an Alert
into a Html msg
alert "Hellow, world!"
|> toHtml
If you want to render interactive alerts, you will have to create a "stack" of stateful alerts, which can contain between 0 and n
Alert
s. Every alert inside this stack is interactive - the user can close them at will. In other words, the alerts in this stack produce Msg
values that you must handle.
There are 3 things you must do in order to properly manage your stateful stack of alerts:
initAlertStack
and save this stack in your model.Msg
value that contains a Alert.Msg
Alert.Msg
values with updateAlertStackA alert stack is nothing more than just a List (Alert msg)
(with some internal mutations done to them), so to show them in your view, all you need to do is call List.map toHtml statefulAlerts
Example:
type Msg
= AlertMsg Alert.Msg
model : Model
model =
{ statefulAlertStack =
initAlertStack AlertMsg
[ alert "Hey there, you can close me :)"
]
}
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
AlertMsg alertMsg ->
let
( alertModel, alertCmd ) =
updateAlertStack AlertMsg alertMsg model.statefulAlertStack
in
( { closeableAlerts = alertModel }
, alertCmd
)
view : Model -> Html msg
view { statefulAlertStack } =
div [] <|
stackToHtml statefulAlertStack
Messages emitted by closeable alerts
Represents the state of closeable alerts
initAlertStack : (Msg -> msg) -> List (Alert msg) -> CloseableAlertStack msg
THIS API IS UNSTABLE AND ALSO VISUALLY UNAPPEALING. DO NOT USE STATEFUL ALERTS YET.
Takes a set of stateless alerts that don't ever emit messages and turns them into Alerts that a user can interact with (i.e. close them).
See the example above to see the usage of initAlertStack
.
This alert stack must be saved in your model in order for it's state to be tracked and altered.
Every time a user clicks on the close icon, the alert will emit a msg
.
updateAlertStack : (Msg -> msg) -> Msg -> CloseableAlertStack msg -> ( CloseableAlertStack msg, Platform.Cmd.Cmd msg )
Update a stack of closeable alerts. This function should be hooked up to your update
function.
stackToHtml : CloseableAlertStack msg -> Html msg
Render a stack of closeable alerts into your view
.