# Button 按钮

请扫码查看示例

# 介绍

按钮用来触发一个动作。

# 引入

通过以下方式来引入组件

使用包管理器安装mui-minix 组件库。如： npm i mui-minix -S;
在要使用该组件的页面中使用element标签引入该组件。

# 代码演示

# 基本用法

<element name="m-button" src="@/node_modules/mui-minix/src/button/index"></element>
<m-button text="按钮" ></m-button>

1
2

# 按钮尺寸

通过 size 属性, 可以控制按钮的大小。目前支持 small, middle, large, super 四种尺寸。默认为 middle。

<element name="m-button" src="@/node_modules/mui-minix/src/button/index"></element>
<m-button size="small" text="小型按钮"></m-button>
<m-button size="middle" text="中型按钮"></m-button>
<m-button size="large" text="大型按钮"></m-button>
<m-button size="super" text="超大型按钮"></m-button>

1
2
3
4
5

# 按钮类型

通过 type 属性, 可以控制按钮类型。目前支持 fill, weak, plain, text 四种尺寸。默认为 fill。

<element name="m-button" src="@/node_modules/mui-minix/src/button/index"></element>
<m-button type="fill" text="强调按钮"></m-button>
<m-button type="weak" text="弱化按钮"></m-button>
<m-button type="plain" text="普通按钮"></m-button>
<m-button type="text" text="文本按钮"></m-button>

1
2
3
4
5

# 主题颜色

通过设置 theme 属性，可以改变开关的主题颜色。支持的主题颜色如下：

主题名称	颜色值
brand	`#267aff`
purple	`#995efc`
blue-purple	`#6575ff`
blue	`#29c3ff`
cyan	`#00cbb8`
yellow	`#ffaa10`
orange	`#ff8225`
orange-red	`#ff6a4c`
gray-offline	`#7c879b`

<element name="m-button" src="@/node_modules/mui-minix/src/button/index"></element>
<m-button theme="brand" text="品牌色按钮"></m-button>
<m-button theme="purple" text="紫色按钮"></m-button>
<m-button theme="blue-purple" text="蓝紫色按钮"></m-button>
<m-button theme="blue" text="蓝色按钮"></m-button>
<m-button theme="cyan text="青色按钮""></m-button>
<m-button theme="yellow" text="黄色按钮"></m-button>
<m-button theme="orange" text="橘色按钮"></m-button>
<m-button theme="orange-red" text="橘红色按钮"></m-button>
<m-button theme="gray-offline" text="离线按钮"></m-button>

1
2
3
4
5
6
7
8
9
10

# 禁用状态

通过设置 disabled 属性，可以控制按钮是否禁用。

<element name="m-button" src="@/node_modules/mui-minix/src/button/index"></element>
<m-button theme="brand" disabeld="{{true}}"></m-button>
<m-button theme="purple" disabeld="{{true}}"></m-button>
<m-button theme="blue-purple" disabeld="{{true}}"></m-button>
<m-button theme="blue" disabeld="{{true}}"></m-button>
<m-button theme="cyan" disabeld="{{true}}"></m-button>
<m-button theme="yellow" disabeld="{{true}}"></m-button>
<m-button theme="orange" disabeld="{{true}}"></m-button>
<m-button theme="orange-red" disabeld="{{true}}"></m-button>
<m-button theme="gray-offline" disabeld="{{true}}"></m-button>

1
2
3
4
5
6
7
8
9
10

# Api

# Prop

字段	说明	类型	默认值	是否必须
`text`	按钮文本	`string`	`-`	`是`
`theme`	主题颜色。可选的值为：`brand` `purple` `blue-purple` `blue` `cyan` `yellow` `orange` `orange-red` `gray-offline`	`string`	`brand`	`否`
`size`	按钮尺寸，可选值为: `small` `middle` `large` `super`	`string`	`middle`	`否`
`type`	按钮类型，可选值为: `fill` `weak` `plain` `text`	`string`	`text`	`否`
`icon`	按钮图标路径，图标格式为 `jpg`，`png` 和 `svg`。	`string`	`-`	`否`
`loading`	是否显示为加载状态	`boolean`	`false`	`否`
`loading-size`	加载图标大小，默认单位为 `px`	`number`	`18`	`否`
`loading-text`	加载状态提示文字	`string`	`-`	`否`
`disabled`	是否禁用	`boolean`	`false`	`否`
`width`	按钮宽度,优先级高于 `size`	`number`	`0`	`否`
`height`	按钮高度,优先级高于 `size`	`number`	`0`	`否`
`text-size`	文本字体大小,优先级高于 `size`	`number`	`0`	`否`
`text-color`	文本颜色,优先级高于 `theme`	`number`	`0`	`否`
`background-color`	背景颜色,优先级高于 `theme`	`number`	`0`	`否`
`border-width`	边框宽度, 仅在`type=plain`时生效	`number`	`1`	`否`
`padding-left`	左侧间距	`number`	`根据高度自动计算`	`否`
`padding-right`	右侧间距	`number`	`根据高度自动计算`	`否`

# Events

事件名称	说明	回调参数
`m-click`	点击时触发，且开关状态不为禁用时触发	`-`