概述
@beisen-cmps/icon-button 是一个基于 React 的 UI 组件库中的一个按钮组件，简化了开发者的工作流，帮助简化按钮操作的体验，样式美观、易于使用。
安装
安装 npm 包：
npm install @beisen-cmps/icon-button
或者使用 yarn：
yarn add @beisen-cmps/icon-button
常用 API 和用法
1. IconButton 组件的使用
IconButton 组件是按钮组件库中的核心组件，支持多种类型的按钮，包括文字按钮和图标按钮。
a. 简单使用示例代码
import { IconButton } from '@beisen-cmps/icon-button';
function App() {
return (
<IconButton>提交</IconButton>
);
}b. 自定义按钮样式示例代码
-- -------------------- ---- -------
------ - ---------- - ---- ---------------------------
-------- ----- -
----- ----- - -
---------------- ----------
------ ------
--
------ -
----------- -----------------------------
--
-2. IconButton 组件的属性
以下是 IconButton 组件的属性列表：
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| children | 按钮文本 | string | - |
| disabled | 禁用按钮 | boolean | false |
| iconClassName | 按钮图标的 className | string | - |
| iconStyle | 按钮图标的 style | CSSProperties | - |
| loading | 是否显示 loading 图标 | boolean | false |
| onClick | 点击按钮时的回调函数 | () => void | - |
| prefixCls | 组件类名前缀 | string | - |
| style | 按钮普通状态时的样式 | CSSProperties | - |
| type | 按钮类型，可选值为 'default' 或 'primary' | string | default |
3. IconButton 组件的 Slot
IconButton 组件有一个默认的 Slot，用于显示 IconButton 的文本。同时，组件也支持自定义的 Slot。
a. 默认 Slot 示例代码
import { IconButton } from '@beisen-cmps/icon-button';
function App() {
return (
<IconButton>提交</IconButton>
);
}b. 自定义 Slot 示例代码
-- -------------------- ---- -------
------ - ---------- - ---- ---------------------------
-------- ----- -
------ -
------------
----- -------- ------------ - ------------
--------------------
-------------
--
-总结
@beisen-cmps/icon-button 组件库提供了丰富的按钮组件，可以满足不同需求的按钮开发，同时也可以更加便捷地定制自己的按钮样式。使用 IconButton 组件可以大大地减少按钮开发的重复工程和样式调整的时间成本，让开发者更加专注于业务开发本身。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5851ab1864dac66dee