Fighting Design

Appearance

On this page

Alert 警告 ​

用于页面中展示重要的提示信息

基本使用 ​

type 属性可以配置不同的主题类型，展示不同的颜色状态

开启

不同文字大小 ​

font-size 属性可以配置不同大小的 alert

开启

是否加粗 ​

使用 bold 属性可将文字设置为粗体显示

开启

是否居中 ​

使用 center 属性可将文本显示中间

开启

可关闭 ​

使用 close 属性可以让 alert 被关闭

开启

简约模式 ​

使用 simple 属性可以配置简约的 alert，样式依然由 type 控制

开启

圆角 ​

round 属性可以配置 alert 显示为圆角

开启

背景颜色 ​

如果你希望文字带上背景颜色，你可以使用 background 属性自定义你的 alert 背景颜色

开启

带有标题 ​

title 可以配置一个标题信息，标题会加粗

开启

滚动列表 ​

alert-list 可传入一个数组进行滚动展示

开启

自定义前缀 icon ​

开启

Attributes ​

参数说明类型可选值默认值
type类型FightingTypedefault primary success danger warning infodefault
font-size副标题文字大小string / number————
title-size主标题文字大小string / number————
bold文字是否以粗体显示boolean——false
center是否居中boolean——false
close可关闭boolean——false
simple简约模式boolean——false
title标题string————
round显示为圆角boolean——false
background背景颜色string————
color副标题字体颜色string————
title-color主标题字体颜色string————
fixed是否固定定位boolean——false
alert-list滚动列表array (string[])————
duration滚动列表滚动时间间隔number————
before-icon自定义前缀 iconFightingIcon————
close-icon自定义关闭 iconFightingIcon————
on-close点击关闭之后执行的回调HandleMouse————

Slots ​

名称说明
default自定义副标题的内容
title自定义主标题的内容
closeIcon自定义关闭 icon
beforeIcon自定义前缀 icon

Interface ​

组件导出以下类型定义：

ts
import type { AlertInstance, AlertProps } from 'fighting-design'

样式变量 ​

组件提供了下列 CSS 变量，可用于自定义样式

名称描述
--alert-border-radius圆角大小
--alert-color文字颜色
--alert-background背景色

Contributors ​