logo

Alert

Alert component for feedback.

When To Use

  • When you need to show alert messages to users.
  • When you need a persistent static container which is closable by user actions.

Examples

The simplest usage for short messages.

expand code expand code

To show close button.

expand code expand code

Decent icon make information more clear and more friendly.

expand code expand code

Display Alert as a banner at top of page.

expand code expand code

Smoothly unmount Alert upon close.

expand code expand code

There are 4 types of Alert: success, info, warning, error.

expand code expand code

Additional description for alert message.

expand code expand code

Replace the default icon with customized content.

expand code expand code

Show a loop banner by using with CSS @keyframes.

expand code expand code

Using the ErrorBoundary provided by .NET 6 for making error handling easier in Blazor.

expand code expand code

Alert API#

Property Description Type Default Value
AfterClose ParameterCalled when close animation is finished EventCallback<MouseEventArgs> --
Banner ParameterWhether to show as banner Boolean false
Closable ParameterWhether Alert can be closed Boolean false
CloseText ParameterClose text to show String --
Description ParameterAdditional content of Alert String --
Icon ParameterCustom icon, effective when showIcon is true RenderFragment --
Message ParameterContent of Alert String --
MessageTemplate ParameterTemplate for content RenderFragment --
ShowIcon ParameterWhether to show icon. Boolean? --
Type ParameterType of Alert styles, options: success, info, warning, error String --
OnClose ParameterCallback when Alert is closed. EventCallback<MouseEventArgs> --
ChildContent ParameterAdditional Content RenderFragment --
Id ParameterID for the component's HTML String Uniquely Generated ID
Class ParameterSpecifies one or more class names for an DOM element. String --
Style ParameterSpecifies an inline style for a DOM element. String --
RefBack ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. ForwardRef --
Tree Drawer
文档已更新,请点击 此处 更新。
A new version of this app is available. Click here to update.