在前端开发中，常常需要用到按钮组件。不过，在实际开发中制作一个简单的按钮也是需要费一些功夫的。为了方便开发者，npm 上提供了许多按钮组件的包。其中，@shortcm/react-button 包是一个比较好用的组件包。本文将详细介绍如何使用 @shortcm/react-button 包。
安装
使用 @shortcm/react-button 包，需要先安装它。使用 npm 命令进行安装：
npm install @shortcm/react-button
安装之后，可以在项目文件夹中看到在 node_modules 文件夹中多了一个名为 @shortcm/react-button 的文件夹。
使用
下面让我们来看一下如何在 React 中使用 @shortcm/react-button 包。
导入
首先，需要将 @shortcm/react-button 包导入到项目中。通过使用 import 语句，可以将 Button 组件导入到项目文件中。
import Button from '@shortcm/react-button';
使用 Button 组件
Button 组件的基本样式如下：
<Button>Click me!</Button>
通过这些代码，我们可以看到一个非常简单的按钮，上面默认有一个 “Click me!” 的文本。当用户点击按钮时，会触发 onClick 事件。
下面，让我们来看看一些 Button 组件的具体应用。
固定类型样式 Button
在实际应用中，按钮的样式经常是固定的。这时候 Button 组件的 type 属性就是一个很好用的属性。通过设置 type 的值为”primary”、”warning”、”danger” 等，可以设置不同类型的按钮。
<Button type="primary">Primary</Button> <Button type="warning">Warning</Button> <Button type="danger">Danger</Button>
图标 Button
在一些场景下，我们需要在按钮上加上一些图标。通过 Button 组件的 icon 属性就可以实现图标的添加。
<Button icon="search">Search</Button> <Button icon="edit">Edit</Button> <Button icon="delete">Delete</Button>
不同尺寸 Button
在实际开发中，我们常常需要设置不同尺寸的按钮。Button 组件的 size 属性就是一个很有用的属性。可以设置按钮的尺寸属性为”small”、”medium”、”large” 等。
<Button size="small">Small Button</Button> <Button size="medium">Medium Button</Button> <Button size="large">Large Button</Button>
不同形状 Button
如果不想使用默认的矩形按钮怎么办？Button 组件的 shape 属性就可以改变按钮的形状。
<Button shape="round">Round Button</Button> <Button shape="circle">Circle Button</Button>
禁用 Button
在一些场景下，我们需要将按钮禁用，比如用户输入不完整时需要禁用某个按钮。Button 组件的 disabled 属性可以将按钮禁用。
<Button disabled>Disabled Button</Button>
以上就是 @shortcm/react-button 包的一些基本使用方法。在实际开发中，还有许多其他属性可供使用。
示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ------ ---- ------------------------
----- --- ------- --------- -
------------- -
------------- ----------
-
-------- -
------ -
-----
------- -------------------------------- ------------
------- -------------------------------
------- -------------------------------
------- -----------------------------
------- -----------------------------
------- -------------------------
------- -----------------------------
------- ------------------ ---------------
------- -------------------- ---------------
------- ------------------ ---------------
------- ------------------- ---------------
------- --------------------- ---------------
------- ----------------- ---------------
------
--
-
-
------ ------- ----总结
在本文中，我们详细介绍了如何安装和使用 @shortcm/react-button 包。通过本文的学习，您可以轻松地创建不同类型、不同尺寸、不同形状和带图标的按钮组件。希望这篇文章对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a130d09270238223a7