Alert

Alert 是一种临时通知，提供有关操作或事件的简明反馈。

Storybook WAI-ARIA Source Recipe Source

Usage

Alert Title

This is an example alert description.

Colors

Blue Color

This is an example alert description.

Cyan Color

This is an example alert description.

Gray Color

This is an example alert description.

Red Color

This is an example alert description.

Yellow Color

This is an example alert description.

Purple Color

This is an example alert description.

Pink Color

This is an example alert description.

Green Color

This is an example alert description.

Orange Color

This is an example alert description.

Variants

Faded Variant

This is an example alert description.

Solid Variant

This is an example alert description.

Outlined Variant

This is an example alert description.

Subtle Variant

This is an example alert description.

Radius

None Radius

This is an example alert description.

Small Radius

This is an example alert description.

Medium Radius

This is an example alert description.

Large Radius

This is an example alert description.

Full Radius

This is an example alert description.

Status

使用 status 属性可以设置 Alert 的状态，每个状态都具有不同的颜色以及图标。

Alert 支持 error、success、warning 和 info 四种状态，默认为 info。

Note: color 属性可覆盖状态的默认颜色。

Error Status

This is an example alert description.

Success Status

This is an example alert description.

Warning Status

This is an example alert description.

Info Status

This is an example alert description.

Custom Icon

默认，Alert 会根据 status 属性显示相应的图标。您也可以通过 icon 属性传入自定义图标。

An alert with a custom icon

Without Icon

将 hideIcon 属性设置为 true，可以隐藏图标。

Alert Title

This is an example alert description.

With Action

使用 action 属性执行额外的操作。

Alert Title

This is an example alert description.

Closable

将 closable 属性设置为 true，将会显示一个关闭按钮，onClose 在按钮被点击时触发。

Closable Alert

This is an example alert description.

API

Alert Props

Alert 继承 as (默认为 'div') 的 Props。

Prop	Type	Default	Description
color	'blue'\|'orange'\|'yellow'\|'ryan'\|'red'\|'green'\|'pink'\|'purple'\|'gray'	-	Alert 的颜色。
radius	'sm'\|'md'\|'lg'\|'xl'\|'full'\|'none'	'md'	Alert 的 borderRadius。
variant	'outlined'\|'faded'\|'solid'\|'subtle'	'solid'	Alert 的外观样式。
icon	ReactNode	-	自定义图标。
className	ClassValue	-	用于根元素的 className。
ref	Ref	-	用于转发根元素。
action	ReactNode	-	在信息的后面显示的操作。
title	ReactNode	-	Alert 的标题。
description	ReactNode	-	Alert 的描述。
closable	boolean	-	Alert 是否可关闭。
status	'error'\|'info'\|'success'\|'warning'	'info'	Alert 的状态。
hideIcon	boolean	-	是否隐藏 icon。
onClose	() => void	-	当关闭按钮被点击时触发。
as	ElementType	'div'	用于根元素的组件。可以是表示 HTML 元素的字符串，也可以是一个组件。
sx	Interpolation	-	用于根元素的 sx 属性。
classes	Partial<Record<Slots, ClassValue>>	-	Alert Slots 的 className。
slotProps	Partial<Record<Slots, ComponentProps>>	-	Alert Slots 的 props。

Alert Slots

Slot Name	Class Name	Default Component	Description
icon	.nui-alert-icon	'div'	Alert 的图标容器。
content	.nui-alert-content	'div'	Alert 的内容容器。
title	.nui-alert-title	'div'	Alert 的标题容器。
description	.nui-alert-description	'div'	Alert 的描述容器。
closeButton	.nui-alert-close-button	Button	Alert 的关闭按钮。