消息
此组件填充所放置容器的宽度,其高度因内容不同而不同. 这个组件的用法是显示一个信息来引起人们的注意,无论是有用的信息还是警告信息. 它们应当用于提供接近某一内容的背景. 此外,它还可以用来增加一个类似联系的行动,作为儿童传递.
图片参考
使用量
import { Message, Button } from '@dt-dds/react';
export const App = () => {
const title = 'Some Title';
const description = 'Some Description';
const type = 'Error';
return (
<Message type={type} title={title} description={description}>
<Message.Actions>
<Button size='small' variant='text'>
View action
</Button>
</Message.Actions>
</Message>
);
};
API 密码
消息
| 财产 | 类型 | 默认 | 说明 |
|---|---|---|---|
children | ReactNode | - 说吧 | 儿童部件需要制造。 在内容方面有灵活性,但建议应当是与25个字符限制挂钩. |
dataTestId | string | 'message' | 自定义测试标识符 . |
style | React.CSSProperties | - 说吧 | 自定义样式 |
type | MessageType | 'default' | 设置信件的类型, 负责图标, 它的颜色, 背景颜色和已破灭边框的颜色 |
title | string | - 说吧 | 可选文本将在信件中作为标题显示 。 内容 它应该有文本字符数限制:50. |
description | string | - 说吧 | 文本将在信件中作为描述显示 。 内容 它应该有文本字符数限制:230. |
onClose | function | - 说吧 | 当提供时,会显示一个关闭按钮,并单击时会触发此功能. |
orientation | Orientation | 'horizontal' | 设置消息组件的方向。 移动方向是垂直的 |
传言. 行动
| 财产 | 类型 | 默认 | 说明 |
|---|---|---|---|
children | ReactNode | - 说吧 | 准备采取行动的集装箱。 需要按钮 . |
dataTestId | string | 'message-action' | 操作的自定义测试标识符 . |
堆栈
- 类型脚本 用于静态类型检查
- 反应 — JavaScript 用户界面库
- 情感 用于使用 JavaScript 写入 Css 样式
- 故事书 ——由Vite供电的UI组件环境
- 欢乐 - JavaScript 测试框架
- 反应测试库 - 以用户为中心测试用户界面组件
- ESLint 语录 代码林入
- 高级 用于代码格式
- 苏普 - 由Esbuild供电的脚本捆绑机
- 雅伦 从管理软件包
图标
yarn build- 制作软件包yarn dev- 在当地运行软件包yarn lint- 将所有文件输入此软件包yarn test- 测试所有单位yarn test:report- 打开测试覆盖报告yarn test:update:snapshot- 进行所有单元测试并更新快照
汇编
运行 yarn build 从软件包的根部 齐声 将原始的 TypeScript 和 React 代码编译为普通 JavaScript .
这个 /dist 文件夹包含编译输出.
message
└── dist
├── index.d.ts <-- Types
├── index.js <-- CommonJS version
└── index.mjs <-- ES Modules version
...
版本
跟着 语义版本
许可证
许可证根据 MIT 许可证