从'./src'导入{提醒};
拱门警告
开始
- npm 版本
- 建设状态
提醒信息,或提醒,告知用户成功或待决行动. 少用点 不要一次显示不止一个.
这个寄存器是完整的模块 拱门 仓库.
安装
此寄存器与 无之后 安装 npm,您可以安装 @arch-ui/alert 与这个命令.
npm install --save @arch-ui/alert
# OR
yarn add @arch-ui/alert
使用量
导入组件到您的应用程序中 .
import { Alert } from '@arch-ui/alert';
要覆盖样式,请使用 @arch-ui/theme 软件包。 。 。 .
文档
提醒信息,或提醒,告知用户成功或待决行动. 少用点 不得一一一相现相.
默认
警报信息一开始看起来很中立 它们是浅蓝色圆形矩形的.
<Alert>Alert message goes here.</Alert>
警报信息传到这里.
您可以将多个段落的文本置于提示中—— 最后一段的下方 margin 将自动覆盖.
<Alert>
<p>
This is a longer alert in its own paragraph. It ends up looking something like this. If we keep
adding more text, it'll eventually wrap to a new line.
</p>
<p>And this is another paragraph.</p>
</Alert>
在它自己的段落中,这是一个较长的警告。 它最后看起来像这样 如果我们继续 加入更多文字,最终会被包裹到一行新行上.
这是另一段.
如有需要,您可以快速从周围内容中空出警示 AlertGroup 包装. 在下面的例子中注意额外的上下边距.
import { Alert, AlertGroup } from '@arch-ui/alert';
<AlertGroup>
<Alert>Alert message goes here.</Alert>
<Alert>Alert message goes here.</Alert>
</AlertGroup>;
外观
资讯 成功 警告 危险
添加外观属性 warning, (中文(简体) ), danger,或 success 将它分别变成黄色、红色或绿色.
<Alert appearance="warning">Alert message goes here.</Alert>
警报信息传到这里.
<Alert appearance="danger">Alert message goes here.</Alert>
警报信息传到这里.
<Alert appearance="success">Alert message goes here.</Alert>
警报信息传到这里.
变化
提醒默认为 a subtle 变体,但如果需要打包,请添加变体属性 bold。 。 。 .
<Alert appearance="danger" variant="bold">
Alert message goes here.
</Alert>
全宽提醒
一个全宽的警告;去除边界和边界半径.
<Alert isFullWidth>
<Container>Full width alert.</Container>
</Alert>
许可证
麻省理工学院 智囊团