Alert
Warning prompt, showing information that needs attention.
When to use
When a page or module needs to display a persistent prompt to the user, this prompt will not disappear automatically unless the user closes it manually.
Fixed at the top of the page in the form of a floating layer for global prompts.
type
The default class prompt is blue for the primary color, while others are for warning, success, and error types.
这是一个描述
Defult
这是一个描述
Success
这是一个描述
Warning
这是一个描述
Error
size
14px text, line height adjusts automatically
这是一个描述
12px
12px
8px
8px
Configurable options
Configurable icons, action buttons, close icons, and jump icons can be combined according to requirements.
这是一个描述
这是一个描述
这是一个描述
这是一个描述
Configuration icon
This is a description This is a description Action
This is a description This is a description Action
This is a description This is a description Action
This is a description This is a description Action
Configuration operation button
这是一个描述
Configuration close icon
这是一个描述
Configure jump icon
Super long adaptation
The text is very long and wraps, with the background height adjusting automatically
The text displays a maximum of 3 lines; if it exceeds 3 lines, it shows an ellipsis and an expand button
这是一个描述这是一个描述这是一个描述这是一个描述这是一个描述这是一个描述
这是一个描述这是一个描述这是一个描述这是一个描述这是一个描述这是一个描述
这是一个描述这是一个描述这是一个描述这是一个描述这是一个描述这是一个描述
这是一个描述这是一个描述这是一个描述这是一个描述这是一个描述这是一个描述
This is a description This is a description This is a description This is a description This is a description This is a description....Show more
This is a description This is a description This is a description This is a description This is a description This is a description This is a description This is a description This is a description This is a description This is a description Show less
Usage scenario
Fixed prompt on the page, location is not fixed, placed according to needs
Fixed prompt at the top of the page, located below the title bar, needs to have a marquee effect
Scenario 2: Fixed notification at the top of the page
Scene 1: Fixed prompt on the page
Component height is adaptive
The component occupies a separate position and cannot遮挡 other content on the page
Configurable carousel effect
To Designer
Component usage
Select the outer layer of the component to switch the title type
The switch can control whether to display the icon, button, close, and jump icons
Warning
Tip box
Error message
Warning box
Information box