Toast トースト

操作の結果やお知らせを、軽量で閉じられる通知で伝えます。

基本的な使い方

インタラクティブプレビュー

Vue のソースを表示

Vue · TypeScript

<script setup lang="ts">
import { AgmButton, AgmToast } from 'augma'
import { computed, nextTick, shallowRef } from 'vue'

const messages = {
  success: { title: '設定を保存しました', description: '新しい表示設定が適用されました。' },
  warning: { title: 'バッテリー残量が少なくなっています', description: '電源に接続してからご利用ください。' },
  danger: { title: '同期が完了しませんでした', description: 'ネットワーク接続を確認して、もう一度お試しください。' },
  neutral: { title: 'プレビューモード', description: 'この操作はローカルのサンプルにだけ影響します。' },
}
const open = shallowRef(false)
const tone = shallowRef<keyof typeof messages>('success')
const message = computed(() => messages[tone.value])

async function show(nextTone: keyof typeof messages) {
  open.value = false
  await nextTick()
  tone.value = nextTone
  open.value = true
}
</script>

<template>
  <div class="example-row">
    <AgmButton @click="show('success')">設定を保存</AgmButton>
    <AgmButton variant="outline" @click="show('warning')">警告を表示</AgmButton>
    <AgmButton variant="outline" @click="show('danger')">失敗をシミュレート</AgmButton>
    <AgmButton variant="ghost" @click="show('neutral')">メッセージを表示</AgmButton>
    <AgmToast
      v-model:open="open"
      :tone="tone"
      :title="message.title"
      :description="message.description"
      close-label="通知を閉じる"
      region-label="通知（F8）"
    />
  </div>
</template>

<style scoped>
.example-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
</style>

API

プロパティ	型	デフォルト	説明
tone	'success' | 'warning' | 'danger' | 'neutral'	'success'	状態の意味。色だけに頼らず、タイトルでも結果を伝えてください
open	boolean	false	v-model:open で更新
title	string	必須	通知のタイトル
description	string	undefined	補足内容
duration	number	5000	自動で閉じるまでの時間（ミリ秒）
closeLabel	string	'关闭通知'	閉じるボタンのアクセシブルネーム
regionLabel	string	'通知（F8）'	通知領域のアクセシブルネーム。F8 ショートカットにも触れてください

イベント

• update:open(boolean)

キーボード操作と利用上の注意

F8 で通知領域にフォーカスし、Escape または閉じるボタンで閉じます。ホバーやフォーカス中はカウントダウンが止まります。AgmToast はアプリごとに 1 つ置くことを推奨します。

インストール

import { AgmToast } from 'augma'
import 'augma/style.css'