使用トースト

トースト通知をアプリに表示するためのコンポーザブルです。

使用法

自動インポートされたuseToastコンポーザーを使用して、Toast通知を表示します。

<script setup lang="ts">
const toast = useToast()

function showToast() {
  toast.add({
    title: 'New message',
    description: 'You have a new message from Benjamin.',
    actions: [{
      icon: 'i-lucide-reply',
      label: 'Reply',
      color: 'neutral',
      variant: 'outline',
      onClick: () => {
        toast.add({ title: 'Reply sent', color: 'success' })
      }
    }]
  })
}
</script>

<template>
  <UButton label="Show toast" @click="showToast" />
</template>
  • useToastコンポーザブルはNuxtのuseStateを使用してトースト状態を管理し、アプリケーション全体の反応性を確保します。
  • Aはデフォルトでは一度に最大5個のトーストを表示します。この制限を超える新しいトーストを追加すると、最も古いトーストは自動的に削除されます。Appコンポーネントのtoaster.maxプロパティで変更します。
  • トーストを削除すると、実際に状態から削除されるまでに200 msの遅延があり、終了アニメーションを可能にします。
Appコンポーネントは、Reka UIのToastProviderコンポーネントを使用するToasterコンポーネントを使用しています。
トーストの外観と動作をカスタマイズする方法については、Toastコンポーネントのドキュメントを参照してください。

API

useToast()

useToastコンポーザブルはトースト通知をグローバルに管理するメソッドを提供します。

add

add(toast: Partial<Toast>): Toast

新しいトースト通知を追加します。

パラメーター

toast
Partial<Toast> required
以下のプロパティを持つ部分的なToastオブジェクト：

** Returns：**追加された完全なToastオブジェクト。

<script setup lang="ts">
const toast = useToast()

function showToast() {
  toast.add({
    title: 'Success',
    description: 'Your action was completed successfully.',
    color: 'success'
  })
}
</script>

update

update(id: string | number, toast: Omit<Partial<Toast>, 'id'>): void

既存のトースト通知を更新します。

パラメータ

id
string | number required
更新するトーストの一意の識別子。
toast
Omit<Partial<Toast>, 'id'> required
更新するプロパティを持つ部分的なToastオブジェクト。idは変更できず、トーストは再開され、durationは再度渡さない限りリセットされます。
<script setup lang="ts">
const toast = useToast()

function updateToast(id: string | number) {
  toast.update(id, {
    title: 'Updated Toast',
    description: 'This toast has been updated.'
  })
}
</script>

remove

remove(id: string | number): void

トースト通知を削除します。

パラメータ

id
string | number required
削除するトーストの一意の識別子。
<script setup lang="ts">
const toast = useToast()

function removeToast(id: string | number) {
  toast.remove(id)
}
</script>

clear

clear(): void

トースト通知をすべて削除する。

<script setup lang="ts">
const toast = useToast()

function clearAllToasts() {
  toast.clear()
}
</script>

トースト

toasts: Ref<Toast[]>

現在のすべてのトースト通知を含むリアクティブ配列。

<script setup lang="ts">
const { toasts } = useToast()
</script>

<template>
  <div>
    <pre>{{ toasts }}</pre>
  </div>
</template>

useScrollShadow

A composable to apply scroll shadow effects on any scrollable element.

useTour

A composable to build guided tours by re-anchoring a single Popover across steps.