前言
@beisen-cmps/base-button 是一个基于 React 16+ 编写的按钮组件，其设计风格简单、美观，可适用于 Web 前端开发中的各种场景。本文将详细介绍如何使用该包进行前端开发。
安装
在使用 @beisen-cmps/base-button 之前，需先确保已安装了 Node.js 环境。在命令行中输入以下命令以安装 @beisen-cmps/base-button:
npm install @beisen-cmps/base-button
引入
在需要使用按钮组件的项目中，可通过以下代码引入 @beisen-cmps/base-button：
import BaseButton from '@beisen-cmps/base-button';
使用
@beisen-cmps/base-button 提供了多种样式、属性等配置项，以满足不同场景下的需求。以下是该组件的基本使用方法：
<BaseButton
className='button'
onClick={() => {console.log('click')}}
>
Click me!
</BaseButton>其中，className 为自定义的类名，可用于自定义样式；onClick 属性设置点击事件的回调函数，当用户点击按钮时，控制台将输出 click。
API
属性
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| className | string | null | 自定义类名 |
| style | object | null | 自定义样式 |
| children | node | null | 按钮的文本或者 Icon |
| disabled | bool | false | 按钮是否不可用 |
| isOutlined | bool | false | 是否显示边框 |
| isLoading | bool | false | 是否显示加载中的动画 |
| size | string | medium | 按钮的尺寸，可选值为 small、medium、large |
| type | string | primary | 按钮的类型，可选值为 primary、success、warning、danger、text |
| onClick | function | null | 点击按钮时的回调函数 |
示例
以下展示了 @beisen-cmps/base-button 在不同场景下的使用示例：
基本按钮
<BaseButton>Click me!</BaseButton>
不可用按钮
<BaseButton disabled>Click me!</BaseButton>
带 Icon 的按钮
<BaseButton><i className='fa fa-home'></i>Home</BaseButton>
主要按钮
<BaseButton type='primary'>Click me!</BaseButton>
成功按钮
<BaseButton type='success'>Click me!</BaseButton>
警告按钮
<BaseButton type='warning'>Click me!</BaseButton>
危险按钮
<BaseButton type='danger'>Click me!</BaseButton>
文本按钮
<BaseButton type='text'>Click me!</BaseButton>
小号按钮
<BaseButton size='small'>Click me!</BaseButton>
大号按钮
<BaseButton size='large'>Click me!</BaseButton>
自定义样式的按钮
<BaseButton style={{backgroundColor: 'red', color: '#fff'}}>Click me!</BaseButton>点击事件处理函数
<BaseButton onClick={() => {console.log('clicked!')}}>Click me!</BaseButton>结语
@beisen-cmps/base-button 是一个简单、易用的前端组件库，本篇文章介绍了如何使用该组件库进行前端开发。希望能对读者们有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/136677