在前端开发中，UI 组件的使用是非常频繁和重要的。而 @material-styled/button 这个 npm 包，便是一款基于 Material Design 设计风格的按钮组件库。在本文中，我们将会详细探究这一组件库的使用方法，包括其安装和引用，组件的 API 及其使用示例。
安装和引用
首先，我们需要在项目中安装 @material-styled/button 这一 npm 包。可以使用 npm 或 yarn 两种包管理器之一进行安装，如下所示：
# 使用 npm 安装 npm install @material-styled/button --save # 使用 yarn 安装 yarn add @material-styled/button
安装完成后，我们可以在项目中引入这一组件库的代码，例如：
import Button from '@material-styled/button';
API
在 @material-styled/button 这一组件库中，由 Button 组件和 ButtonGroup 组件两部分组成。下面我们将介绍这两个组件的 API 及其使用方法。
Button 组件
Button 组件是 @material-styled/button 组件库中的基础组件，提供了常见的按钮样式和交互效果。其支持以下 props：
| prop 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| variant | string | 'contained' | 按钮样式，可选值：'contained' | 'text' | 'outlined' |
| color | string | 'default' | 按钮颜色，可选值：'default' | 'primary' | 'secondary' |
| startIcon | React.Element | string | 无 | 起始图标 |
| endIcon | React.Element | string | 无 | 结束图标 |
| disabled | boolean | false | 是否禁用 |
| fullWidth | boolean | false | 是否宽度撑满 |
| size | string | 'medium' | 按钮大小，可选值：'small' | 'medium' | 'large' |
| className | string | 无 | 组件样式类名 |
| onClick | Function(event) | 无 | 点击事件处理函数 |
ButtonGroup 组件
ButtonGroup 组件是一个容器组件，用于包裹多个 Button 组件，组成一个按钮组。其支持以下 props：
| prop 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| variant | string | 'contained' | 按钮样式，可选值：'contained' | 'text' | 'outlined' |
| color | string | 'default' | 按钮颜色，可选值：'default' | 'primary' | 'secondary' |
| size | string | 'medium' | 按钮大小，可选值：'small' | 'medium' | 'large' |
| fullWidth | boolean | false | 是否宽度撑满 |
| className | string | 无 | 组件样式类名 |
ButtonGroup 组件还支持以下方法：
setSelected(index: number)
设置当前选中的按钮索引，接收一个整数类型参数，表示按钮在 ButtonGroup 中的索引值。
示例代码
下面是一个使用 @material-styled/button 组件库的示例代码：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------ ---- --------------------------
------ ----------- ---- --------------------------------------
-------- ----- -
----- ---------- ------------ - ------------
----- ---------------------- - ------- -- -
-------------------
--
------ -
-----
------------
-------------------
---------------
------------
---------
------------------------
------------------------------------
-
-------
------------------- --- - - ----------------------- -- - ------------------------- ---
----------- -- - -------------- --
-
------ -
---------
-------
------------------- --- - - ----------------------- -- - ------------------------- ---
----------- -- - -------------- --
-
------ -
---------
-------
------------------- --- - - ----------------------- -- - ------------------------- ---
----------- -- - -------------- --
-
------ -
---------
--------------
------
--
-以上示例代码展示了如何使用 @material-styled/button 组件库中的 Button 组件和 ButtonGroup 组件，实现一个简单的按钮组。通过 setSelecte 方法，我们可以在 ButtonGroup 中选中一个按钮，这一演示也展示了 Button 组件中的各种 props 的用法，例如 variant、color、startIcon、disabled 等，经过这个演示，你应该能够得到 @material-styled/button 库的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600571a081e8991b448e82d2