消息

消息组件显示与另一个元素相关的信息，例如无效输入。

导入#


import { Message } from 'primereact/message';

基本#

要显示的文本通过text属性定义。

用户名是必需的


<Message text="Username is required" />

严重性#

severity属性指定消息的类型。

成功消息

信息消息

警告消息

错误消息

次要消息

对比消息


<Message severity="info" text="Info Message" />
<Message severity="success" text="Success Message" />
<Message severity="warn" text="Warning Message" />
<Message severity="error" text="Error Message" />
<Message severity="secondary" text="Secondary Message" />
<Message severity="contrast" text="Contrast Message" />

表单#

在表单元素旁边显示错误消息时，消息组件非常方便。

用户名

用户名是必需的

邮箱


<div className="flex flex-wrap align-items-center mb-3 gap-2">
    <label htmlFor="username" className="p-hidden-accessible">Username</label>
    <InputText id="username" placeholder="Username" className="p-invalid mr-2" />
    <Message severity="error" text="Username is required" />
</div>
<div className="flex flex-wrap align-items-center gap-2">
    <label htmlFor="email" className="p-hidden-accessible">Email</label>
    <InputText id="email" placeholder="Email" className="p-invalid mr-2" />
    <Message severity="error" />
</div>

模板#

自定义内容通过content属性显示。

永远相信 Prime。


<Message
style={{
    border: 'solid #696cff',
    borderWidth: '0 0 0 6px',
    color: '#696cff'
}}
className="border-primary w-full justify-content-start"
severity="info"
content={content}
/>

无障碍#

屏幕阅读器

消息组件使用alert角色，该角色隐式将aria-live定义为“assertive”，将aria-atomic定义为“true”。由于任何属性都会传递到根元素，因此aria-labelledby等属性和 aria-label也可以选择使用。

关闭元素是一个button，其aria-label默认引用locale API 的aria.close属性，您可以使用closeButtonProps自定义元素并覆盖默认的aria-label。

关闭按钮键盘支持

按键	功能
回车	关闭消息。
空格	关闭消息。