メッセージ

メッセージコンポーネントは、インラインメッセージを表示するために使用されます。

インポート#


import { Messages } from 'primereact/messages';

基本#

メッセージは、コンポーネント`ref`によって提供される`show`メソッドを呼び出すことによって表示されます。単一のメッセージは、`severity`、`summary`など様々なプロパティを定義するMessageインターフェースによって指定されます。詳細


<Messages ref={msgs} />

重大度#

`severity`オプションは、メッセージの種類を指定します。


msgs.current.show([
    {sticky: true, severity: 'info', summary: 'Info', detail: 'Message Content', closable: false},
    {sticky: true, severity: 'success', summary: 'Success', detail: 'Message Content', closable: false},
    {sticky: true, severity: 'warn', summary: 'Warning', detail: 'Message Content', closable: false},
    {sticky: true, severity: 'error', summary: 'Error', detail: 'Message Content', closable: false},
    {sticky: true, severity: 'secondary', summary: 'Secondary', detail: 'Message Content', closable: false},
    {sticky: true, severity: 'contrast', summary: 'Contrast', detail: 'Message Content', closable: false}
]);

動的#

`show`メソッドに配列を渡すことで、複数のメッセージが表示されます。


<Button type="button" onClick={addMessages} label="Show" className="mr-2" />
<Button type="button" onClick={clearMessages} label="Clear" className="p-button-secondary" />

<Messages ref={msgs} />

閉じられる#

メッセージはデフォルトで閉じるアイコンを表示します。`closable`オプションはこの動作を制御するために使用されます。


msgs.current.show([
    { sticky: true, severity: 'success', summary: 'Success', detail: 'Message is closable'},
    { sticky: true, severity: 'info', summary: 'Info', detail: 'Message is not closable', closable: false}
]);

スティッキー#

`life`オプションで定義された3000ms後にメッセージは消えます。`sticky`オプションを設定すると、自動的に非表示にならないメッセージが表示されます。


msgs.current.show([
    { sticky: true, life: 1000, severity: 'success', summary: 'Success', detail: 'Message Content', closable: false },
    { sticky: true, life: 2000, severity: 'info', summary: 'Info', detail: 'Message Content', closable: false },
    { sticky: true, life: 3000, severity: 'warn', summary: 'Warning', detail: 'Message Content', closable: false },
    { sticky: true, life: 4000, severity: 'error', summary: 'Error', detail: 'Message Content', closable: false }
]);

カスタムアイコン#

`icon`または`content`オプションを使用するだけで、カスタムアイコン付きのメッセージを作成できます。


msgs.current.show([
    { sticky: true, severity: 'info', icon: 'pi pi-send', detail: 'Info message' },
    {
        severity: 'success',
        sticky: true,
        content: (
            <React.Fragment>
                <img alt="logo" src="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" width="32" />
                <div className="ml-2">How may I help you?</div>
            </React.Fragment>
        )
    }
]);

テンプレート#

`content`オプションを使用して、メッセージ内のカスタムコンテンツを定義します。


    msgs.current.show({
        severity: 'info',
        sticky: true,
        content: (
            <React.Fragment>
                <img alt="logo" src="/images/logo.png" width="32" />
                <div className="ml-2">Always bet on Prime.</div>
            </React.Fragment>
        )
    });

アクセシビリティ#

スクリーンリーダー

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

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

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

キー	機能
Enter	メッセージを閉じます。
Space	メッセージを閉じます。