介绍
@apex-elements/button 是一个轻量、易用的 UI 组件库，它提供了一系列的按钮组件，包括基础按钮、带图标按钮、禁用按钮等。在开发正式的前端项目中，使用它可以快速实现按钮效果，提升了开发效率，降低了用户学习成本。
安装
在使用 @apex-elements/button 前，需要先安装它。可以使用 npm 命令行工具进行安装，打开终端输入以下命令即可：
npm install @apex-elements/button
安装成功后，需要在项目中引入模块。
引入模块
import Button from '@apex-elements/button'; import '@apex-elements/button/dist/apex-button.min.css';
使用示例
下面是一些@apex-elements/button 的使用示例：
基础按钮
<apex-button>Click me!</apex-button>
图标按钮
<apex-button icon="menu"></apex-button>
禁用按钮
<apex-button disabled>Disabled</apex-button>
带图标的禁用按钮
<apex-button disabled icon="upload">Upload</apex-button>
自定义按钮样式
每个按钮样式都可以自定义。
<apex-button style="--apex-button-background-color: #1E90FF; --apex-button-color: #fff;">Custom button</apex-button>
API 文档
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 按钮类型，可选值为 'button' 和 'submit' | string | button |
| disabled | 是否禁用当前按钮。 | bool | false |
| loading | 是否在按钮上展示加载动画。 | bool | false |
| icon | 图标名称，参照 'fontawesome' 中的图标名称，例如：'edit' | string | |
| iconSize | 图标尺寸，与 fontawesome 样式一致。例如：'1x','2x','3x','4x','5x' 等 | string | 1x |
| iconPosition | 图标位置，可选值为 'left' 和 'right' | string | left |
| round | 是否为圆角。 | bool | true |
| transparent | 是否透明。 | bool | false |
| flat | 是否为平坦按钮。 | bool | false |
| outline | 是否为描边按钮。 | bool | false |
| size | 按钮尺寸，可选值为 'xs'、'sm'、'md'、'lg' 和 'xl' | string | md |
| height | 按钮高度 | string | |
| padding | 按钮内边距 | string | |
| borderThickness | 按钮描边粗细 | string |
事件
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| click | 当按钮被单击时，发生 click 事件。 | event |
| hover | 当鼠标指针悬停在按钮上时，发生 hover 事件。可用于展示提示信息或者展示一个下拉菜单等。注意：在移动端上，该事件不会触发。 | event |
结束语
使用 @apex-elements/button 可以快速实现各种效果，从而提高前端开发效率，减少样式工作量。如果您在使用过程中遇到了问题，可以在 'Github' 上提 issue，我们会在第一时间做出回应。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a730d09270238226a1