Toast experimental
Ark UI Toast 기반 wrapper입니다. 일시적인 피드백과 작업 결과 알림을 위한 group, root, title, description, action-trigger, close-trigger anatomy를 제공합니다.
Preview
<script lang="ts">
import * as Toast from '@odbd/svelte/toast'
import { createToaster } from '@odbd/svelte/toast'
const toaster = createToaster({
placement: 'bottom-end',
overlap: true,
gap: 12,
offsets: '1rem',
// exit glide는 --opacity/--y 전환(--odbd-motion-gentle)이 그리므로 그보다 길게 유지
removeDelay: 400,
})
function showSavedToast() {
toaster.success({
title: savedTitle,
description: savedDescription,
closable: true,
action: {
label: '기록 보기',
onClick: showHistoryToast,
},
})
}
function showHistoryToast() {
toaster.info({
title: historyTitle,
description: historyDescription,
closable: true,
})
}
function showErrorToast() {
toaster.error({
title: errorTitle,
description: errorDescription,
closable: true,
})
}
</script>
{#snippet savedTitle()}설정이 저장됐어요{/snippet}
{#snippet savedDescription()}변경 내용은 다음 새로고침부터 같은 값으로 유지돼요.{/snippet}
{#snippet historyTitle()}작업 기록을 준비했어요{/snippet}
{#snippet historyDescription()}최근 변경 사항을 확인할 수 있도록 목록에 표시해요.{/snippet}
{#snippet errorTitle()}저장하지 못했어요{/snippet}
{#snippet errorDescription()}네트워크 상태를 확인한 뒤 다시 시도하세요.{/snippet}
<div style="display: grid; max-width: 30rem; gap: var(--odbd-space-3);">
<div style="display: flex; flex-wrap: wrap; gap: var(--odbd-space-2);">
<button
class="odbd-button"
data-variant="solid"
data-size="md"
type="button"
onclick={showSavedToast}
>
저장 알림
</button>
<button
class="odbd-button"
data-variant="outline"
data-size="md"
type="button"
onclick={showErrorToast}
>
오류 알림
</button>
</div>
<Toast.Toaster {toaster}>
{#snippet children(toast)}
{@const item = toast()}
<Toast.Root>
{#if item.title}
<Toast.Title>{@render item.title()}</Toast.Title>
{/if}
{#if item.description}
<Toast.Description>{@render item.description()}</Toast.Description>
{/if}
{#if item.action}
<Toast.ActionTrigger>{item.action.label}</Toast.ActionTrigger>
{/if}
{#if item.closable}
<Toast.CloseTrigger>닫기</Toast.CloseTrigger>
{/if}
</Toast.Root>
{/snippet}
</Toast.Toaster>
</div>
Import
Svelte와 React가 같은 anatomy 계약을 공유합니다. 선택한 프레임워크는 모든 페이지에서 유지됩니다. 패키지 설치는 Getting Started를 참고하세요.
import * as Toast from '@odbd/svelte/toast' import { Toast } from '@odbd/react/toast'