Alert

基础反馈

基于 Bootstrap 5 的警告框组件，为典型用户操作提供情景反馈消息，支持八种颜色变体、可关闭模式与淡出动画、链接、标题与图标

Component Demo

Basic usage and examples of the Alert component

变体

主要提示 — 简单的 primary 警告框示例，快来看看吧！

次要提示 — 简单的 secondary 警告框示例，快来看看吧！

成功提示 — 简单的 success 警告框示例，快来看看吧！

危险提示 — 简单的 danger 警告框示例，快来看看吧！

警告提示 — 简单的 warning 警告框示例，快来看看吧！

信息提示 — 简单的 info 警告框示例，快来看看吧！

浅色提示 — 简单的 light 警告框示例，快来看看吧！

深色提示 — 简单的 dark 警告框示例，快来看看吧！

实时示例

可关闭

危险提示！ 点击右侧关闭按钮，警告框会以淡出动画从页面移除。

链接颜色

主要提示 — 这是一条主要警告消息，点击查看详情。

次要提示 — 这是一条次要警告消息，点击查看详情。

附加内容

做得很好！

您成功阅读了这条重要的提示消息。这段示例文字会稍微长一些，以便您了解警告框中的间距在不同内容之间是如何变化的。

每当您需要时，请务必使用边距工具来保持内容的整洁。

图标

主要提示示例，带有图标

成功提示示例，带有图标

警告提示示例，带有图标

危险提示示例，带有图标

API Documentation

Complete API reference for the Alert component

Props

Alert

属性名	类型	默认值	描述
`variant`	`AlertVariant`	`'primary'`	情景颜色变体，渲染为 `alert-*` 类
`dismissible`	`boolean`	`false`	可关闭模式，渲染 `alert-dismissible` 类并在内容末尾渲染关闭按钮
`show`	`boolean`	-	受控的显示状态，为 `false` 时以淡出动画移除警告框；不传时为非受控，点击关闭按钮自动隐藏
`onClose`	`() => void`	-	点击关闭按钮时触发的回调，受控模式下需配合 `show` 一起使用
`closeLabel`	`string`	`'Close alert'`	关闭按钮的无障碍标签，向屏幕阅读器描述按钮用途
`closeVariant`	`CloseButtonVariant`	`'white'（variant 为 dark 时）`	关闭按钮变体，`variant="dark"` 时默认为 `white`，用于深色背景

AlertHeading

属性名	类型	默认值	描述
`as`	`ElementType`	`'h4'`	渲染的标题元素标签，可选其他标题级别或元素

AlertLink

属性名	类型	默认值	描述
`as`	`ElementType`	`'a'`	渲染的元素标签，默认渲染为 `a` 标签
`href`	`string`	`'#'`	链接地址

Common Props

属性名	类型	默认值	描述
`children`	`ReactNode`	-	内容
`className`	`string`	-	自定义类名
`...rest`	`HTMLAttributes`	-	透传原生元素属性（如 `onClick`、`style` 等）

Type Definitions

AlertVariant

警告框情景颜色变体类型

export type AlertVariant =
  'danger' | 'dark' | 'info' | 'light' | 'primary' | 'secondary' | 'success' | 'warning';

AlertProps

警告框组件属性接口

export interface AlertProps extends HTMLAttributes<HTMLDivElement> {
  children?: ReactNode;
  className?: string;
  closeLabel?: string;
  closeVariant?: CloseButtonVariant;
  dismissible?: boolean;
  onClose?: () => void;
  show?: boolean;
  variant?: AlertVariant;
}

AlertHeadingProps

警告框标题组件属性接口

export interface AlertHeadingProps extends HTMLAttributes<HTMLElement> {
  as?: ElementType;
  children?: ReactNode;
  className?: string;
}

AlertLinkProps

警告框链接组件属性接口

export interface AlertLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
  as?: ElementType;
  children?: ReactNode;
  className?: string;
  href?: string;
}