Mind UI

# Button 按钮

# 介绍

按钮，提供几种基础样式和尺寸，可自定义图标。

# 引入

"usingComponents": {
    "m-button": "/dist/button/index"
}

# 示例

# 按钮类型

按钮支持 default、primary、success、info、warning、danger 六种类型，默认为 default。

<m-button>默认按钮</m-button>
<m-button type="primary">主要按钮</m-button>
<m-button type="success">成功按钮</m-button>
<m-button type="info">信息按钮</m-button>
<m-button type="warning">警告按钮</m-button>
<m-button type="danger">危险按钮</m-button>

# 朴素按钮

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

<m-button type="primary" plain>朴素按钮</m-button>
<m-button type="success" plain>朴素按钮</m-button>

# 圆角按钮

通过 round 属性来设置圆角按钮。

<m-button type="primary" round>圆角按钮</m-button>
<m-button type="success" round>圆角按钮</m-button>

# 禁用状态

通过 disabled 属性来禁用按钮，禁用状态下按钮不可点击。

<m-button type="primary" disabled>禁用状态</m-button>
<m-button type="success" disabled>禁用状态</m-button>

# 按钮尺寸

支持 normal、small、mini 三种尺寸，默认为 normal。

<m-button type="primary" size="normal">普通按钮</m-button>
<m-button type="primary" size="small">小型按钮</m-button>
<m-button type="primary" size="mini">迷你按钮</m-button>

# 自定义颜色

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

<m-button color="#7232dd">单色按钮</m-button>

开放能力

<m-button open-type="getUserInfo" bind:getuserinfo="getuserinfo">获取用户授权</m-button>

Page({
	// 用户授权信息
 	getuserinfo({ detail }) {
    	console.log(detail)
  	}
})

# Properties

参数 说明 类型 可选值 默认值
custom-class 根节点样式类 String — —
size 大小 String medium small mini —
type 类型 String ghost white primary success warning danger info —
plain 朴素按钮 Boolean — false
round 圆角 Boolean — false
loading 加载中 Boolean — false
disabled 禁用 Boolean — false
color 字体颜色 String — —
bgcolor 背景色，支持传入 linear-gradient 渐变色 String — —
open-type 微信开放能力 String — —

# Events

事件名称 说明 返回值
bind:click 非 disabled，loading 状态时可触发的点击事件 —
bind:getuserinfo 获取用户信息 —
bind:contact 客服消息回调 —
bind:getphonenumber 获取用户手机号回调 —

← Transition 动画 →