按钮
此组件允许用户通过点击它来采取行动.
图片参考
按钮使用
import { Button } from '@dt-dds/react-button';
export const App = () => {
const handleClick = () => null; //Some action here
return <Button onClick={handleClick}>Click me</Button>;
};
属性
| 财产 | 类型 | 默认 | 说明 |
|---|---|---|---|
children | ReactNode | - 说吧 | 拟提供的儿童成分 |
onClick | function | - 说吧 | 点击按钮时触发的函数 |
dataTestId | string | 按钮 | 自定义测试标识符 |
isDisabled | boolean | 虚假 | 确定按钮的已禁用状态 |
variant | 'solid' | 'outlined' | 'text' | 固态 | 确定按钮的变体. solid 按钮用于高乳房动作. outlined 代表中乳房动作. text 代表低乳房动作. |
color | 'primary' | 'error' | 'secondary'| 'contrast' 'accent' | 小学 | 确定按钮的颜色。 取决于变体. |
style | React.CSSProperties | - 说吧 | 给按钮一些特定的 Css 属性 |
isLoading | boolean | - 说吧 | 如果设置为真, 按钮将被禁用, 标签旁边显示旋转器 |
变体和颜色
如道具表中所提及,颜色取决于变体. 以下是每个可用变体的现有颜色列表:
| 颜色( V) | 固态 | 大纲 | 文本 |
|---|---|---|---|
primary | 对 | 对 | 对 |
secondary | 对 | 对 | 对 |
contrast | 对 | - 说吧 | - 说吧 |
accent | 对 | 对 | 对 |
error | 对 | 对 | 对 |
堆栈
- 类型脚本 用于静态类型检查
- 反应 — 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 文件夹包含编译输出.
button
└── dist
├── index.d.ts <-- Types
├── index.js <-- CommonJS version
└── index.mjs <-- ES Modules version
...
版本
跟着 语义版本
许可证
许可证根据 MIT 许可证