トースト

トーストは、オーバーレイにメッセージを表示するために使用されます。

インポート #


import Toast from 'primevue/toast';

トーストサービス #

トーストコンポーネントは、アプリケーションプラグインとしてインストールする必要がある *ToastService* によって制御されます。


import {createApp} from 'vue';
import ToastService from 'primevue/toastservice';

const app = createApp(App);
app.use(ToastService);

このサービスは、Composition API の場合は *useToast* 関数、Options API の場合はアプリケーションの *$toast* プロパティで使用できます。


import { useToast } from 'primevue/usetoast';

const toast = useToast();

基本 #

トーストの理想的な場所は、アプリケーション内の任意のコンポーネントで使用できるように、メインアプリケーションテンプレートです。単一のメッセージは、重大度、概要、詳細などのプロパティを定義する Message インターフェースによって表されます。


<Toast />
<Button label="Show" @click="show()" />

重大度 #

*severity* オプションは、メッセージのタイプを指定します。


<Toast />
<Button label="Success" severity="success" @click="showSuccess" />
<Button label="Info" severity="info" @click="showInfo" />
<Button label="Warn" severity="warn" @click="showWarn" />
<Button label="Error" severity="danger" @click="showError" />
<Button label="Secondary" severity="secondary" @click="showSecondary" />
<Button label="Contrast" severity="contrast" @click="showContrast" />

位置 #

メッセージは、*group* キーを一致させることで特定のトーストコンポーネントをターゲットにすることができ、場所は *position* でカスタマイズされます。


<Toast position="top-left" group="tl" />
<Toast position="bottom-left" group="bl" />
<Toast position="bottom-right" group="br" />

<Button label="Top Left" @click="showTopLeft" />
<Button label="Bottom Left" @click="showBottomLeft" />
<Button label="Bottom Right" @click="showBottomRight" />

複数 #

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


<Toast />
<Button label="Multiple" @click="showMultiple()" />

固定 #

メッセージは、*life* オプションで定義されたミリ秒数後に消えます。メッセージを固定にするには、*life* オプションを省略します。


<Toast />
<Button @click="showSticky" label="Sticky" />
<Button label="Clear" severity="secondary" @click="clear()" />

テンプレート #

メッセージ内のカスタムコンテンツは、*message* テンプレートで定義されます。


<Toast position="bottom-center" group="bc" @close="onClose">
    <template #message="slotProps">
        <div class="flex flex-col items-start flex-auto">
            <div class="flex items-center gap-2">
                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
                <span class="font-bold">Amy Elsner</span>
            </div>
            <div class="font-medium text-lg my-4">{{ slotProps.message.summary }}</div>
            <Button size="small" label="Reply" severity="success" @click="onReply()"></Button>
        </div>
    </template>
</Toast>
<Button @click="showTemplate" label="View" />

ヘッドレス #

ヘッドレスモードは、デフォルトの要素ではなくトーストUI全体を実装できる *container* スロットを定義することで有効になります。


<Toast position="top-center" group="headless" @close="visible = false">
    <template #container="{ message, closeCallback }">
        <section class="flex flex-col p-4 gap-4 w-full bg-primary/70 rounded-xl">
            <div class="flex items-center gap-5">
                <i class="pi pi-cloud-upload text-white dark:text-black text-2xl"></i>
                <span class="font-bold text-base text-white dark:text-black">{{ message.summary }}</span>
            </div>
            <div class="flex flex-col gap-2">
                <ProgressBar :value="progress" :showValue="false" :style="{ height: '4px' }" pt:value:class="!bg-primary-50 dark:!bg-primary-900" class="!bg-primary/80"></ProgressBar>
                <label class="text-sm font-bold text-white dark:text-black">{{ progress }}% uploaded</label>
            </div>
            <div class="flex gap-4 mb-4 justify-end">
                <Button label="Another Upload?" size="small" @click="closeCallback"></Button>
                <Button label="Cancel" size="small" @click="closeCallback"></Button>
            </div>
        </section>
    </template>
</Toast>
<Button @click="show" label="View" />

アクセシビリティ #

スクリーンリーダー

トーストコンポーネントは、*aria-live* を「assertive」として、*aria-atomic* を「true」として暗黙的に定義する *alert* ロールを使用します。

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

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

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