Toast
Toast는 일시적인 알림 메시지를 사용자에게 표시하는 컴포넌트입니다.Toast 컴포넌트는 화면의 모서리에 일시적인 알림 메시지를 표시하는 데 사용됩니다.
사용자의 작업에 대한 피드백을 제공하고, 피드백을 하나의 리스트로 관리하기 때문에 다른 컴포넌트와 사용 방식이 다릅니다.
Property
Methods
Toast를 추가, 업데이트 및 제거할 수 있습니다.
ColorPalette
Toast의 색상 팔레트를 설정합니다.
Examples
Action
Action 버튼과 함께 사용할 수 있습니다.
Close
Close 버튼을 제거할 수 있습니다.
Icon
Icon을 커스텀 할 수 있습니다.
Custom
Toast 아이템을 완전히 커스텀할 수 있습니다.
Props
Toast.Provider
자식에게 Toast 상태를 제공하고, useToastManager 또는 toastManager로 추가한 각 Toast를 아이콘, 제목, 설명, 액션, 닫기 버튼과 함께 표시합니다. 자체 HTML 요소를 렌더링하지 않습니다.
| Prop | Default | Type |
|---|---|---|
children? | - | ReactNode |
toastManager? | - | ToastManager |
limit? | 3 | number |
timeout? | 4000 | number |
Toast.ProviderPrimitive
Toast를 표시하지 않고 자식에게 Toast 상태를 제공하므로, 다른 프리미티브로 직접 Toast 목록을 구성할 수 있습니다. 자체 HTML 요소를 렌더링하지 않습니다.
| Prop | Default | Type |
|---|---|---|
children? | - | ReactNode |
toastManager? | - | ToastManager |
limit? | 3 | number |
timeout? | 5000 | number |
Toast.PortalPrimitive
Toast 목록을 일반 DOM 계층 밖에 렌더링하는 포털 컨테이너. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
container? | - | HTMLElementShadowRootReact.RefObject<HTMLElement | ShadowRoot | null>null |
render? | - | ReactElementfunction |
Toast.ViewportPrimitive
Toast가 쌓이는 화면의 고정 영역. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Toast.RootPrimitive
Toast 객체의 colorPalette로 색이 정해지는 Toast 하나. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
toast | - | ToastObjectType<any> |
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
swipeDirection? | ['up', 'right'] | leftrightupdown("left" | "right" | "up" | "down")[] |
render? | - | ReactElementfunction |
Toast.ContentPrimitive
Toast의 텍스트와 버튼을 담는 컨테이너. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Toast.TitlePrimitive
Toast의 title을 표시하는 제목. <h2> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Toast.DescriptionPrimitive
Toast의 description을 표시하는 문단. <p> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Toast.ActionPrimitive
Toast의 액션을 실행하는 버튼. Toast 객체의 actionProps로 스타일을 지정합니다. <button> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
nativeButton? | true | boolean |
render? | - | ReactElementfunction |
Toast.ClosePrimitive
Toast를 닫는 아이콘 버튼. Toast 객체의 close 옵션이 false이면 숨겨집니다. <button> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
nativeButton? | true | boolean |
render? | - | ReactElementfunction |
Toast.IconPrimitive
Toast의 아이콘. Toast 객체의 icon을 표시하며, success와 danger 컬러 팔레트에서는 기본 아이콘을 표시합니다. <svg> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
useToastManager
Toast 하나의 옵션. useToastManager 또는 toastManager의 add, update, promise에 전달합니다.
| Prop | Default | Type |
|---|---|---|
id? | - | string |
title? | - | ReactNode |
description? | - | ReactNode |
colorPalette? | info | successdangerinfo |
icon? | - | ReactElement |
close? | true | boolean |
actionProps? | - | ActionProps |
timeout? | 5000 | number |
priority? | low | lowhigh |
onClose? | - | function |
onRemove? | - | function |
data? | - | object |