A Checklist component shows a checklist,
from which an end user can select one or multiple items.
For a selectable checklist, at least one item must be selected so that an end user can know that this checklist can be selected.
Property
Property | Description | Type | Required | Default value |
value | The selected data. | string | number (string | )[] | No | - |
options | ChecklistItem for configuring options in each column | ChecklistItem[] | No | [] |
multiple | Whether to support multiple selections. | boolean | No | false |
className | The class name. | string | No | - |
ChecklistItem
Property | Description | Type | Required | Default value |
title | The title. | string | Yes | - |
value | The value. | string | value | Yes | - |
image | The image. | string | No | - |
description | The description. | string | No | - |
disabled | Whether to disable the component. | boolean | Class name | false |
readOnly | Whether the checklist is read-only. | boolean | The class name. | false |
Event
Event name | Description | Type |
onChange | Callback fired when the selected item is changed. |
|
Slot
Name | Description | Type |
content | The custom style of CheckListItem. | The slot-scope for receiving selected item parameters. |
icon | The custom selected icon. | - |
Style class
Class name | Description |
amd-checklist | The style of a selectable checklist. |
amd-checklist-item-content | The content style of a selectable checklist. |
amd-checklist-item-text | The text style of a selectable checklist. |
amd-checklist-item-image | The image style of a selectable checklist. |
amd-checklist-item-text-description | The style of the text description of a selectable checklist. |
amd-checklist-item-check-icon | The style of a selected icon of a selectable checklist. |
Code sample
Basic usage
The following shows an example of the code in the index.axml file:
<demo-block title="Simple layout - single choice" padding="0">
<checklist
value="{{1}}"
options="{{options_1}}"
onChange="onChange"
/>
</demo-block>
<demo-block title="Complex layout - multiple choice" padding="0">
<checklist
value="{{value}}"
options="{{options_2}}"
multiple
onChange="onChange"
/>
</demo-block>
<demo-block title="Disabled status" padding="0">
<checklist
value="{{[2]}}"
options="{{options_3}}"
multiple
onChange="onChange"
/>
</demo-block>
<demo-block title="Read-only status" padding="0">
<checklist
value="{{[2]}}"
options="{{options_4}}"
multiple
onChange="onChange"
/>
</demo-block>
<demo-block title="Custom check icon && component content" padding="0">
<checklist
value="{{[2]}}"
options="{{options_3}}"
multiple
onChange="onChange"
>
<view slot="icon">
<icon color='red' type="LikeOutline" size="x-small" class="demo-checklist-checked-icon"/>
</view>
<view slot="content" slot-scope="props">
title: {{props.item.title}}
</view>
</checklist>
</demo-block>The following shows an example of the code in the index.js file:
Page({
data: {
value: [1, 2],
options_1: [
{
value: 1,
title: 'Tickable list item 1'
},
{
value: 2,
title: 'Tickable list item 2'
},
{
value: 3,
title: 'Tickable list item 3'
}
],
options_2: [
{
value: 1,
image: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ',
description: "Here is the description information",
title: 'Tickable list item 1'
},
{
value: 2,
image: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ',
description: "Here is the description information",
title: 'Tickable list item 2'
},
{
value: 3,
image: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ',
description: "Here is the description information",
title: 'Tickable list item 3'
}
],
options_3: [
{
value: 1,
title: 'Tickable list item 1'
},
{
value: 2,
title: 'Disabled list item 2',
disabled: true
},
{
value: 3,
title: 'Tickable list item 3'
}
],
options_4: [
{
value: 1,
title: 'Tickable list item 1'
},
{
value: 2,
title: 'Read-only list item 2',
readOnly: true
},
{
value: 3,
title: 'Tickable list item 2'
}
]
},
onChange(v) {
console.log('The current selected value is: ', v)
}
})The following shows an example of the code in the index.acss file:
.demo-checklist-label {
font-size: 32rpx;
color: #999;
padding: 36rpx 0 16rpx 16rpx;
}
.demo-checklist-checked-icon {
font-size: 36rpx;
}The following shows an example of the code in the index.json file:
{
"defaultTitle": "Checklist",
"usingComponents": {
"checklist": "antd-mini/es/Checklist/index",
"icon": "antd-mini/es/Icon/index",
"demo-block": "../../components/DemoBlock/index"
}
}