按钮组件
一个自定义的反应按钮组件 .
安装
npm install @bolttech/frontend-foundations @bolttech/atoms-button
或者说
yarn add @bolttech/frontend-foundations @bolttech/atoms-button
道具
这个 Button 组件接受以下属性:
| Prop | 类型 | 说明 |
|---|---|---|
| 数据测试 | string | 这个 data-testid 用于测试的属性. |
| 已禁用 | boolean | 设定为时禁用按钮 true。 。 。 . |
| 标题 | string | 按钮的文本内容 . |
| 变体 | string | 按钮的变体样式(例如, 'primary', (中文(简体) ), 'secondary', (中文(简体) ), 'alternative') (中文(简体) ). |
| 大小 | string | 按钮的大小( 例如 ), 'sm', (中文(简体) ), 'md', (中文(简体) ), 'lg') (中文(简体) ). |
| 图标右 | string | 按钮右侧显示的图标名称 . |
| 图标左 | string | 按钮左侧显示的图标名称 . |
| 全网风 | boolean | 如果 true。 。 。 . |
| 类型 | string | 按钮的类型(例如, 'button', (中文(简体) ), 'submit', (中文(简体) ), 'reset') (中文(简体) ). |
| 点击 | function | 回调函数处理按钮点击事件 . |
使用量
import React from 'react';
import {Button} from '@bolttech/atoms-button';
import {bolttechTheme, BolttechThemeProvider} from "@bolttech/frontend-foundations";
const ExampleComponent = () => {
const handleButtonClick = () => {
// Logic to handle the button click event
};
return (
<BolttechThemeProvider theme={bolttechTheme}>
<Button
dataTestId="custom-button"
disabled={false}
title="Click Me"
variant="primary"
size="md"
iconRight="arrow_forward"
fullWidth={false}
type="button"
onClick={handleButtonClick}
/>
</BolttechThemeProvider>
);
};
export default ExampleComponent;
捐款
欢迎捐款! 对于任何错误修正、改进或新特性,请打开一个 问题 或者提交拉动请求.
请在提交前遵循代码标准并测试您的更改 .