メッセージ

メッセージコンポーネントは、無効な入力など、他の要素に関連する情報を表示します。

インポート#


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-sr-only">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-sr-only">Email</label>
    <InputText id="email" placeholder="Email" className="p-invalid mr-2" />
    <Message severity="error" />
</div>
         

テンプレート#

カスタムコンテンツは、contentプロパティで表示されます。


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

アクセシビリティ#

スクリーンリーダー

メッセージコンポーネントは、暗黙的にaria-liveを"assertive"、aria-atomicを"true"として定義するalertロールを使用します。任意の属性がルート要素に渡されるため、aria-labelledbyや aria-labelなどの属性もオプションで使用できます。

閉じる要素は、デフォルトでロケールAPIのaria.closeプロパティを参照するaria-labelを持つbuttonです。closeButtonPropsを使用して要素をカスタマイズし、デフォルトのaria-labelを上書きできます。

閉じるボタンのキーボードサポート

キー機能
Enterメッセージを閉じます。
スペースメッセージを閉じます。
              PrimeReact 10.8.3 by PrimeTek