AMCheckBox
Checkbox
Sample Code
copy
// API-DEMO page/component/am-checkbox/am-checkbox.json
{
"defaultTitle": "Mini Program AntUI component library",
"usingComponents": {
"list": "mini-antui/es/list/index",
"list-item": "mini-antui/es/list/list-item/index",
"am-checkbox": "mini-antui/es/am-checkbox/index"
}
}
copy
<!-- API-DEMO page/component/am-checkbox/am-checkbox.axml -->
<list>
<view slot="header">
List + Checkbox
</view>
<block a:for="{{items}}">
<list-item
thumb=""
arrow="{{false}}"
index="{{index}}"
key="items-{{index}}"
last="{{index === (items.length - 1)}}"
>
<view slot="prefix" style="display: flex; align-items: center;">
<am-checkbox id="{{item.id}}" data-name="{{item.value}}" disabled="{{item.disabled}}" checked="{{item.checked}}" onChange="onChange" />
</view>
<label for="{{item.id}}">{{item.title}}</label>
</list-item>
</block>
</list>
<view style="padding: 16px;">
<view style="color: #888; font-size: 14px;">
Protocol
</view>
<view style="margin-top: 10px;">
<label style="display: flex; line-height: 24px;">
<am-checkbox />
<text style="text-indent: 8px; color: #888">Agree with Credit Payment Service Contract</text>
</label>
</view>
</view>
<view style="padding: 16px; background-color: #fff;">
<form onSubmit="onSubmit" onReset="onReset">
<view>
<view style="color: #666; font-size: 14px; margin-bottom: 5px;">Select the framework you have used:</view>
<view>
<checkbox-group name="libs">
<label a:for="{{items2}}" style="display: flex; align-items: center; height: 30px;">
<am-checkbox value="{{item.name}}" checked="{{item.checked}}" disabled="{{item.disabled}}" />
<text style="color: #888; font-size: 14px; margin-left: 8px;">{{item.value}}</text>
</label>
</checkbox-group>
</view>
<view style="margin-top: 10px;">
<button type="primary" size="mini" formType="submit">submit</button>
</view>
</view>
</form>
</view>
copy
// API-DEMO page/component/am-checkbox/am-checkbox.js
Page({
data: {
items: [
{ checked: true, disabled: false, value: 'a', title: 'Checkbox - Checked by default', id: 'checkbox1' },
{ checked: false, disabled: false, value: 'b', title: 'Checkbox - Unchecked by default', id: 'checkbox2' },
{ checked: true, disabled: true, value: 'c', title: 'Checkbox - disabled checked by default', id: 'checkbox3' },
{ checked: false, disabled: true, value: 'd', title: 'Checkbox - disabled unchecked by default', id: 'checkbox4' },
],
items2: [
{ name: 'react', value: 'React', checked: true },
{ name: 'vue', value: 'Vue.js' },
{ name: 'ember', value: 'Ember.js' },
{ name: 'backbone', value: 'Backbone.js', disabled: true },
],
},
onSubmit(e) {
my.alert({
content: `You are selecting the framework ${e.detail.value.libs.join(', ')}`,
});
},
onReset() {},
onChange(e) { console.log(e); },
});
Attributes
Property | Description | Type | Default | Required |
value | Component value, the value carried with the change event when checked. | String | - | No |
checked | Checked or not, allowing the checked setting by default. | Boolean | false | No |
disabled | Disable or not. | Boolean | false | No |
onChange | Callback function triggered by the change event. | (e: Object) => void | - | No |
id | Works with the for attribute of the label component. | String | - | No |