按钮

mx-button 按钮

按钮用于触发一个操作，如提交表单。

#引入

在app.json或index.json中引入组件，详细介绍见快速上手

"usingComponents": {
  "mx-button": "/miniprogram_npm/m-ui/mx-button/index"
}

#小程序码

可使用微信扫码查看小程序码

#

#代码演示

#按钮类型

支持default、primary、weak、info、warning、danger、text七种类型，默认为default。

<mx-button type="default">默认按钮</mx-button>
<mx-button type="primary">主要按钮</mx-button>
<mx-button type="info">信息按钮</mx-button>
<mx-button type="warning">警告按钮</mx-button>
<mx-button type="danger">危险按钮</mx-button>
<mx-button type="weak">弱化按钮</mx-button>\
<mx-button type="text">文字按钮</mx-button>

#朴素按钮

通过plain属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。

<mx-button plain type="primary">朴素按钮</mx-button>
<mx-button plain type="info">朴素按钮</mx-button>

#细边框

设置hairline属性可以开启 0.5px 边框，基于伪类实现。

<mx-button plain hairline type="primary">细边框按钮</mx-button>
<mx-button plain hairline type="info">细边框按钮</mx-button>

#禁用状态

通过disabled属性来禁用按钮，此时按钮的bind:click事件不会触发。

<mx-button disabled type="primary">禁用状态</mx-button>
<mx-button disabled type="info">禁用状态</mx-button>

#加载状态

<mx-button loading type="primary" />
<mx-button loading type="primary" loading-type="spinner" />
<mx-button loading type="info" loading-text="加载中..." />

#按钮形状

<mx-button square type="primary">方形按钮</mx-button>
<mx-button round type="info">圆形按钮</mx-button>

#图标按钮

通过icon属性设置按钮左侧图标，支持 Icon 组件里的所有图标，也可以传入图标 URL。通过img-size可以设置左侧图标大小。 通过right-icon属性设置右侧按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL。通过rightIconSize可以设置右侧图标大小。

  <mx-button plain type="primary" imgSize="48" size="large" round icon="{{icon1}}" block class="demo-margin-bottom"
      >按钮</mx-button
    >
    <mx-button type="primary" icon="star-o" class="demo-margin-right" />
    <mx-button type="primary" icon="star-o" class="demo-margin-right">按钮</mx-button>
    <mx-button type="primary" right-icon="arrow" rightIconSize="20" class="demo-margin-right">按钮</mx-button>
    <mx-button
      type="primary"
      imgSize="48"
      round
      icon="{{icon2}}"
      custom-class="custom-demo"
      class="demo-margin-right"
    ></mx-button>
    <mx-button plain type="primary" imgSize="48" round icon="{{icon1}}" custom-class="custom-demo"></mx-button>

#按钮尺寸

支持large、normal、medium、small四种尺寸，默认为normal。

<mx-button type="primary" size="large">大号按钮</mx-button>
<mx-button type="primary" size="medium">迷你按钮</mx-button>
<mx-button type="primary" size="normal">普通按钮</mx-button>
<mx-button type="primary" size="small">小型按钮</mx-button>

#块级元素

通过block属性可以将按钮的元素类型设置为块级元素。

<mx-button type="primary" block>块级元素</mx-button>

#自定义颜色

通过color属性可以自定义按钮的颜色。通过text-color属性可以自定义按钮文案的颜色。

<mx-button color="#7232dd">单色按钮</mx-button>
<mx-button color="#7232dd" plain>单色按钮</mx-button>
<mx-button color="linear-gradient(to right, #4bb0ff, #6149f6)">
  渐变色按钮
</mx-button>
<mx-button size="medium" round text-color="#FF8225" color="#995EFC">中型按钮</mx-button>
<mx-button size="medium" round text-color="#FFAA10" color="#6575FF">中型按钮</mx-button>

#API

#Props

参数	说明	类型	默认值
id	标识符	string	-
type	按钮类型，可选值为 primary info warning danger weak text	string	default
size	按钮尺寸，可选值为 normal large medium small	string	normal
color	按钮颜色，支持传入linear-gradient渐变色	string	-
icon	左侧图标名称或图片链接	string	-
img-size	左侧图标大小	string	24
right-icon	右侧图标名称或图片链接	string	-
right-icon-size	右侧图标大小	string	24
class-prefix	图标类名前缀	string	mx-icon
plain	是否为朴素按钮	boolean	false
block	是否为块级元素	boolean	false
round	是否为圆形按钮	boolean	false
square	是否为方形按钮	boolean	false
disabled	是否禁用按钮	boolean	false
hairline	是否使用 0.5px 边框	boolean	false
loading	是否显示为加载状态	boolean	false
loading-text	加载状态提示文字	string	-
loading-type	加载状态图标类型，可选值为 spinner	string	circular
loading-size	加载图标大小	string	20px
custom-style	自定义样式	string	-

#Event

事件名	说明	参数
bind:click	点击按钮，且按钮状态不为加载或禁用时触发	-

#外部样式类

名称	说明
custom-class	根节点样式类
loading-class	加载图标样式类