AI 助理
备案控制台
文档
输入文档关键字查找
首页 移动开发平台 mPaaS 小程序 小程序开发 小程序扩展组件 antd-mini 通用 按钮（Button）

按钮（Button）

更新时间：
产品详情
相关技术圈
我的收藏

用于开始一个即时操作，标记一个（或封装一组）操作命令，用来响应用户的点击行为，以触发相应的业务逻辑。

属性

属性

类型

必填

默认值

说明

type

'default' | 'primary' | 'warn' | 'danger' | 'success' | 'light'

否

'default'

按钮类型：

  • default：辅助按钮

  • primary：品牌色按钮

  • warn：警示按钮

  • danger：危险按钮

  • success：成功按钮

  • light：弱按钮

fill

'outline' | 'solid' | 'none'

否

'solid'

填充样式

disabled

boolean

否

false

是否禁用。

activeClassName

string

否

-

按下时的类名。

subText

string

否

-

辅助文字，显示在第二行。

inline

boolean

否

false

内联，不撑满父级宽度

inlineSize

'small' | 'medium' | 'large' | 'x-large'

否

'medium'

内联尺寸

icon

string

否

-

按钮左侧图标。

loading

boolean

否

false

是否加载中，加载中时不可点击。

loadingText

string

否

-

加载中时的文字。

htmlType

'button' | 'submit' | 'reset'

否

'button'

按钮原生类型，在表单提交时有效。

mode

string

否

-

结合表单使用时，设置 mode 值为 'form'。

form

string

否

-

结合表单使用时，需要设置为所在表单组件的 form 值。

className

string

否

-

类名

事件

事件名

说明

事件类型

onTap

点击按钮，触发此回调

( e: Event ) => void

插槽

名称

说明

icon

图标插槽

样式类

类名

说明

amd-button

整体样式

amd-button-content

按钮内容样式

amd-button-loading-container

加载区域样式

amd-button-loading-text

加载区域文字样式

amd-button-loading

加载动画样式

amd-button-wrap

加载区域右侧样式

amd-button-icon

图标样式

amd-button-text

按钮文字样式

amd-button-subtext

副标题样式

代码示例

基本使用

index.axml 的代码设置如下：

<view class="demo">
  <demo-block title="填充模式">
    <view class="btn-list btn-list-default">
      <button 
        type="primary"
        fill="solid">
        solid
      </button>
      <button 
        type="primary"
        fill="outline">
        outline
      </button>
      <button 
        type="primary"
        fill="none">
        none
      </button>
    </view>
  </demo-block>
  <demo-block title="语义按钮">
    <view class="btn-list">
      <button 
        a:for="{{list}}" 
        type="{{item.type}}">
        {{item.type}}
      </button>
    </view>
  </demo-block>
  <demo-block title="禁用状态">
    <button 
      disabled
      type="primary">
      禁用状态
    </button>
  </demo-block>
  <demo-block title="加载状态">
    <button 
      loading
      type="primary"
      loadingText="正在加载">
      加载状态
    </button>
  </demo-block>
  <demo-block title="含有副标题">
    <view class="btn-list">
      <button 
        subText="副标题"
        type="primary">
        按钮
      </button>
    </view>
  </demo-block>
</view>

index.js 的代码设置如下：

Page({
  data: {
    list: [
      { type: 'default' },
      { type: 'primary' },
      { type: 'warn' },
      { type: 'danger' },
      { type: 'success' },
      { type: 'light' },
    ],
  },
});

index.acss 的代码设置如下：

.btn-list-default {
  margin-bottom: -24rpx;
}

index.json 的代码设置如下：

{
  "defaultTitle": "Button",
  "usingComponents": {
    "button": "antd-mini/es/Button/index",
    "list": "antd-mini/es/List/index",
    "list-item": "antd-mini/es/List/ListItem/index",
    "switch": "antd-mini/es/Switch/index",
    "demo-block": "../../components/DemoBlock/index"
  }
}

内联按钮

index.axml 的代码设置如下：

<view class="demo">
  <demo-block title="填充模式">
    <view class="container">
      <button 
        a:for="{{fills}}" 
        fill="{{item}}" 
        type="primary"
        inline="{{true}}" >
        {{item}}
      </button>
    </view>
  </demo-block>
  <demo-block title="语义按钮">
    <view class="container">
      <button 
        a:for="{{types}}" 
        type="{{item}}" 
        inline="{{true}}" >
        {{item}}
      </button>
    </view>
  </demo-block>
  <demo-block title="按钮尺寸">
    <view class="container">
      <button 
        a:for="{{sizes}}" 
        type="primary" 
        inline="{{true}}"
        inlineSize="{{item}}">
        {{item}}
      </button>
    </view>
  </demo-block>
  <demo-block title="禁用状态">
    <view class="container">
      <button 
        type="primary" 
        inline="{{true}}"
        disabled="{{true}}">
        禁用状态
      </button>
    </view>
  </demo-block>
  <demo-block title="加载状态">
    <view class="container">
      <button 
        type="primary" 
        inline="{{true}}"
        loading="{{true}}" 
        loadingText="正在加载">
        加载状态
      </button>
    </view>
  </demo-block>
</view>

index.js 的代码设置如下：

Page({
  data: {
    types: ['default', 'primary', 'warn', 'danger', 'success', 'light'],
    sizes: ['small', 'medium', 'large', 'x-large'],
    fills: ['solid', 'outline', 'none'],
  },
});

index.acss 的代码设置如下：

.container button {
  margin-right: 12rpx;
  margin-bottom: 8rpx;
}

index.json 的代码设置如下：

{
  "defaultTitle": "Button",
  "usingComponents": {
    "button": "antd-mini/es/Button/index",
    "list": "antd-mini/es/List/index",
    "list-item": "antd-mini/es/List/ListItem/index",
    "switch": "antd-mini/es/Switch/index",
    "demo-block": "../../components/DemoBlock/index"
  }
}

自定义 Icon

index.axml 的代码设置如下：

  <demo-block title="自定义图标">
    <view class="btn-list">
      <button 
        type="primary" 
        icon="AppOutline"
        onTap="handleTap" >
        Icon
      </button>
    
      <button 
        type="primary" 
        icon="{{url}}"
        onTap="handleTap" >
        Image
      </button>
    
      <button 
        type="primary" 
        onTap="handleTap" >
        <view slot="icon">※</view>使用icon slot
      </button>
    </view>
  </demo-block>

index.js 的代码设置如下：

Page({
  data: {
    url: 'https://gw.alipayobjects.com/mdn/rms_ce4c6f/afts/img/A*XMCgSYx3f50AAAAAAAAAAABkARQnAQ',
  },
  handleTap() {
    my.alert({
      title: 'tap',
    });
  },
});

index.json 的代码设置如下：

{
  "defaultTitle": "Button",
  "usingComponents": {
    "button": "antd-mini/es/Button/index",
    "demo-block": "../../components/DemoBlock/index"
  }
}

辅助按钮

index.axml 的代码设置如下：

<demo-block title="辅助按钮">
  <view class="container-1">
    <button type="default" fill="solid">辅助操作</button>
    <button type="primary" fill="solid">主要操作</button>
  </view>
  
  <view class="container-2">
    <button type="default" fill="solid">辅助操作</button>
    <button type="primary" fill="outline">主要操作</button>
  </view>
  
  <view class="container-3">
    <button type="default" inline="{{true}}">辅助操作</button>
    <button type="primary" inline="{{true}}">主要操作</button>
  </view>
  
  <view class="container-4">
    <button type="default" fill="solid" inline="{{true}}">辅助操作</button>
    <button type="primary" fill="outline" inline="{{true}}">主要操作</button>
  </view>  
</demo-block>

index.js 的代码设置如下：

Page({
});

index.acss 的代码设置如下：

.container-1,
.container-2 {
  display: flex;
  margin: 12px 0;
}

.container-3,
.container-4 {
  margin: 12px 0;
}

.container-1 .amd-button:first-child,
.container-2 .amd-button:first-child,
.container-3 .amd-button:first-child,
.container-4 .amd-button:first-child {
  margin-right: 6px;
}

.container-1 .amd-button:last-child,
.container-2 .amd-button:last-child,
.container-3 .amd-button:last-child,
.container-4 .amd-button:last-child {
  margin-right: 6px;
}

.amd-button {
  flex: 1;
}

index.json 的代码设置如下：

{
    "defaultTitle": "Button",
    "usingComponents": {
      "button": "antd-mini/es/Button/index",
      "demo-block": "../../components/DemoBlock/index"
    }
  }
上一篇：通用下一篇：图标（Icon）
文档推荐