لافتة الإشعار

Loading demo: notification-banner-real-world

التثبيت

npx sdaia-ui@latest add notification-banner

import { NotificationBanner } from "@/components/ui/notification-banner"

<NotificationBanner layout="stacked" type="leading-icon" />

بانر إشعار بتخطيط رأسي مكدَّس.

Loading demo: notification-banner-stacked

بانر مع صورة تُعرض بجانب محتوى الإشعار.

Loading demo: notification-banner-image

بانر مع صورة رمزية للمستخدم للإشعارات المتعلقة بأشخاص.

Loading demo: notification-banner-avatar

خصائص مكوّن NotificationBanner.

Prop	Type	Default	Required
layout	'inline' \| 'stacked'	'inline'	optional
type	'leading-icon' \| 'avatar' \| 'progress' \| 'image'	'leading-icon'	optional
title	ReactNode	-	required
description	ReactNode	-	optional
icon	ReactNode	-	optional
avatar	NotificationBannerAvatar	-	optional
imageSrc	string	-	optional
imageAlt	string	''	optional
progress	number	40	optional
actions	ReactNode	-	optional
onDismiss	() => void	-	optional
hideCloseButton	boolean	false	optional
dismissLabel	string	'Close'	optional
dir	'ltr' \| 'rtl'	-	optional
rtl	boolean	false (deprecated)	optional