The UI.Alert
is a component for displaying feedback in a full-width banner.
It can have different background colors depending on the type of feedback.
An alert can be created and render as in the following pipeline:
Element.column []
[ Alert.danger "Failed to login."
|> Alert.renderElement renderConfig
, -- The rest of the screen (...)
]
The Alert msg
type is used for describing the component for later rendering.
primary : String -> Alert msg
The primary color scheme applied to the alert background.
Alert.primary "Proceed to login..."
success : String -> Alert msg
The success color scheme applied to the alert background.
Alert.success "Category created with success."
warning : String -> Alert msg
The warning color scheme applied to the alert background.
Alert.warning "Proceed with caution!"
danger : String -> Alert msg
The danger color scheme applied to the alert background.
Alert.danger "Failed to apply changes!"
withGenericIcon : Alert msg -> Alert msg
Displays an icon in the right side of the alert, depending on its color scheme.
- Primary: Won't show any icon;
- Success: Shows [UI.Icon.check](UI-Icon#check);
- Warning: Will show a loading spinner;
- Danger: Shows [UI.Icon.warning](UI-Icon#warning).
withInlineStyle : Alert msg -> Alert msg
Inline style makes the alert's corners rounded
renderElement : UI.RenderConfig.RenderConfig -> Alert msg -> Element msg
End of the builder's life. The result of this function is a ready-to-insert Elm UI's Element.