Semantic-UI 表单消息内容

语言: Markdown

Semantic-UI 是一个优秀的前端拓展框架。它提供了种类丰富的组件，其中包括了表单组件。在表单输入过程中，经常需要进行消息提示，例如输入格式不正确或是必填项未填写等。针对这些情况，Semantic-UI 提供了表单消息内容组件，可快速实现消息的显示。

一、使用方法

表单消息内容组件包含了 success、error、warning、info 四种类型的消息。使用方法如下：

<div class="ui success message">
    <div class="header">操作成功</div>
    <p>提交成功！</p>
</div>

<div class="ui error message">
    <div class="header">操作失败</div>
    <p>字段不能为空！</p>
</div>

<div class="ui warning message">
    <div class="header">警告</div>
    <p>密码过于简单！</p>
</div>

<div class="ui info message">
    <div class="header">信息</div>
    <p>请填写正确的邮箱地址。</p>
</div>

其中，<div class="ui xxx message"> 为消息类型的外层容器。header 为消息头部，<p> 为消息正文。

二、效果展示

三、自定义样式

表单消息内容组件提供了默认的样式，但如果需要定制化样式，可以通过以下方式实现：

.message {
  background-color: #f9edbe;
  color: #8b6d41;
  border-color: #faebcc;
}

.message .header {
  color: #9f6000;
}

四、总结

表单消息内容组件是 Semantic-UI 中实现提示信息的好工具。通过使用预设样式或者自定义样式，可以快速实现表单消息的呈现。