Checklist

• Select one or more items from a list.

• Select at least one item by default so that users can tell the list is selectable.

Properties

Property	Description	Type	Required	Default value
value	The selected data.	string | number (string | )[]	No	-
options	The ChecklistItem data that configures each list option.	ChecklistItem[]	No	[]
multiple	Whether to allow multiple selections.	boolean	No	false
className	The custom CSS 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 the item is disabled.	boolean	Class name	false
readOnly	Whether the item is read-only.	boolean	Class name	false

Events

Event name	Description	Type
onChange	Callback triggered when the selection changes.	(value:string|number|[], column: ChecklistItem)=>void

Slots

Name	Description	Type
content	Custom style for each ChecklistItem.	A scoped slot that accepts the selected item parameter.
icon	Customizes the selected-state icon.	-

Style classes

Class name	Description
amd-checklist	Root style of the checklist container.
amd-checklist-item-content	Style for each item's content area.
amd-checklist-item-text	Style for each item's title text.
amd-checklist-item-image	Style for each item's image.
amd-checklist-item-text-description	Style for each item's description text.
amd-checklist-item-check-icon	Style for each item's selected-state icon.

Code examples

Basic usage

Sample index.axml file:

<demo-block title="Simple layout - Single-select" padding="0">
  <checklist 
    value="{{1}}"
    options="{{options_1}}"
    onChange="onChange"
  />
</demo-block>

<demo-block title="Complex layout - Multi-select"  padding="0">
  <checklist 
    value="{{value}}" 
    options="{{options_2}}"
    multiple
    onChange="onChange"
  />
</demo-block>
<demo-block title="Disabled state" padding="0">
  <checklist 
    value="{{[2]}}"
    options="{{options_3}}"
    multiple
    onChange="onChange"
  />
</demo-block>

<demo-block title="Read-only state" 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>

Sample index.js file:

Page({
  data: {
    value: [1, 2],
    options_1: [
      {
        value: 1,
        title: 'Checklist Item 1'
      },
      {
        value: 2,
        title: 'Checklist Item 2'
      },
      {
        value: 3,
        title: 'Checklist Item 3'
      }
    ],
    options_2: [
      {
        value: 1,
        image: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ',
        description: "This is the description.",
        title: 'Checklist Item 1'
      },
      {
        value: 2,
        image: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ',
        description: "This is the description.",
        title: 'Checklist Item 2'
      },
      {
        value: 3,
        image: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ',
        description: "This is the description.",
        title: 'Checklist Item 3'
      }
    ],
    options_3: [
      {
        value: 1,
        title: 'Checklist Item 1'
      },
      {
        value: 2,
        title: 'Disabled Item 2',
        disabled: true
      },
      {
        value: 3,
        title: 'Checklist Item 3'
      }
    ],
    options_4: [
      {
        value: 1,
        title: 'Checklist Item 1'
      },
      {
        value: 2,
        title: 'Read-only Item 2',
        readOnly: true
      },
      {
        value: 3,
        title: 'Checklist Item 3'
      }
    ]
  },
  onChange(v) {
    console.log('The currently selected value is: ', v)
  }
})

Sample index.acss file:

.demo-checklist-label {
  font-size: 32rpx;
  color: #999;
  padding: 36rpx 0 16rpx 16rpx;
}

.demo-checklist-checked-icon {
  font-size: 36rpx;
}

Sample index.json file:

{
  "defaultTitle": "Checklist",
  "usingComponents": {
    "checklist": "antd-mini/es/Checklist/index",
    "icon": "antd-mini/es/Icon/index",
    "demo-block": "../../components/DemoBlock/index"
  }
}