useToast 사용

앱에 토스트 알림을 표시하는 구성 가능한 구성 요소입니다.

Usage

자동으로 가져온 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>
  • xuseToast 컴포지블은 Nuxt의 useState를 사용하여 토스트 상태를 관리하여 응용 프로그램 전반에 걸쳐 반응성을 보장합니다.
  • A 최대 5개의 토스트가 기본적으로 표시됩니다. 이 제한을 초과하는 새 토스트를 추가하면 가장 오래된 토스트가 자동으로 제거됩니다. App 구성 요소에서 toaster.max 소품을 사용하여 변경합니다.
  • 토스트를 제거할 때, 실제로 상태에서 제거되기 전에 200ms의 지연이 발생하여 애니메이션을 종료할 수 있습니다.
앱을 Reka UI의 ToastProvider 구성 요소를 사용하는 Toaster 구성 요소를 사용하는 App 구성 요소로 래핑해야 합니다.
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>

toast (### toast) - 토스터 (### toast)

toasts: Ref<Toast[]> (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.