消息框

消息框能够轻松展示一些需要引起用户注意的内容。

基本使用

为元素添加 alert 类来获得消息框的外观。

嘿！这是一则提示。

包含链接

使用 .alert-link 类来为消息框内的链接添加样式。

Hi! 这条消息可能需要你注意。了解更多

包含关闭按钮

使用 .alert-close 类来为消息框内的关闭按钮添加样式。絮语注意到是当需要在消息框中包含更多内容时，需要将消息文本放置在 .alert-text 中。

嘿！这是一则提示。了解更多

包含操作按钮

像添加关闭按钮一样，还可以添加其他操作按钮：

嘿！这是一则提示。了解更多

可以将多个按钮放在工具栏中：

嘿！这是一则提示。了解更多

外观类型

配合丰富的 CSS 工具类 来实现不同消息框的外观。

嘿！这是一则提示。

嘿！这是一则提示。

嘿！这是一则提示。

嘿！这是一则提示。

嘿！这是一则提示。

嘿！这是一则提示。

嘿！这是一则提示。

CSS 类

消息框提供了如下 CSS 类：

类	类型	作用
alert	实体类	元素作为消息框组件
alert-icon	实体类	元素作为消息框内左侧图标
alert-close	实体类	元素作为消息框关闭按钮
alert-text	实体类	元素作为消息框文本内容

CSS 变量

消息框提供了如下 CSS 变量：

变量名称	变量含义
--alert-bg	消息框默认背景色