@acodez/button 中文文档教程

Question

@acodez/button

具有大量自定义功能的 React 按钮组件。

---

• Installation
• PropsAPI
• Usage

---

Installation

npm install @acodez/button

Props API

Property	Type	Required	Default value	Description
btnSize	string	no	md	size of the button, choose from xs, sm,md, lg
btnColor	string	no	primary	color scheme of the button, choose from primary, secondary, danger, warning, success, info, dark, light
btnType	string	no	textWithIcon	textWithIcon, icon, spinner, or text
btnStyle	string	no	solid	button style, solid, outline, or transparent
btnBorder	string	no	round	border radius, round or square
btnWidth	string	no	auto	button width, auto or full
btnIconPos	string	no	left	button icon position, left or right

---

Usage

import Button from "@acodez/button";

<Button 
    btnColor="primary" // 'info', 'success', 'danger', 'warning', 'light', 'dark'
    btnSize="sm" // 'xs', 'md', 'lg'
    btnBorder="round" // 'square'
    btnStyle="solid" // 'outline', 'transparent'
    btnWidth="auto" // 'full'
    btnIconPos="left" // 'right'
    btnType="textWithIcon" // 'text', 'icon', 'spinner'
    >
    Button
</Button>

btnSize
使用 btnSize 属性调整按钮的大小/宽度。
选项 - 'xs'、'sm'、'md'、'lg'。
默认值 - 'md'
示例：

<Button btnSize="md">Button</Button>

btnColor
使用 btnColor 属性调整按钮的配色方案。
选项 - 'primary', 'secondary', 'warning', 'danger', 'info', 'light', 'dark'.
默认值 - 'primary'
示例：

<Button btnColor="primary">Button</Button>

btnType
当您只想将按钮用作图标或用作微调器时，请使用 btnType 属性。
选项 - 'textWithIcon'、'text'、'icon'、'spinner'。
默认值 - 'textWithIcon'
示例：

<Button btnType="spinner">
    <i className="ion-load-a"></i> // your spinner icon or image.
</Button>

btnStyle
使用 btnStyle 更改按钮的整体样式/外观。
选项-“实心”、“轮廓”、“透明”。
默认值 - 'solid'
示例：

<Button btnStyle="outline">Button</Button>

btnBorder
使用 btnBorder 改变按钮的边框半径。
选项-“方形”、“圆形”。
默认值 - 'round'
示例：

<Button btnBorder="square">Button</Button>

btnWidth
使用 btnWidth 将按钮更改为自动宽度或全宽。
选项-“自动”、“完整”。
默认值 - '自动'
示例：

<Button btnWidth="full">Button</Button>

btnIconPos
使用 btnIconPos 将图标位置更改为文本的左侧或右侧。
选项-“左”、“右”。
默认值 - '左'
示例：

<Button btnIconPos="right">
    <i className="ion-ios-arrow-thin-right"></i>
    Login Now
</Button>

链接
将按钮更改为链接 (href)。
例子：

<Button link="/innerPage">
    Click to view!
</Button>