Alert component
First look at the renderings:
The component supports five colors, namely primary, default, warning, success, danger, and the
size supports lg, sm, and normal.
The close button on the far left can control whether to display.
Can support title plus content.
Look at the code. The
style uses mixin, @extend, @include, etc. in scss, which makes it more convenient and concise to write css styles. I have already defined many $ variables in it.
interface interface
The value to be passed in can be children, type, size, title, show.
enumerate
Enumeration allows us to manipulate the code more conveniently, using AlertType.Warning instead of warning, so that if you want to change the warning to warning in the future, you only need to change it in the enum.
Type alias
The specific writing method has been introduced in my first article on the button component.
Main code
Use the code, the
effect is as shown in the figure
