antd-mini
Version:
antd-mini 是支付宝小程序 UI 组件库，遵循 Ant Design 规范。
177 lines (149 loc) • 8.68 kB
Markdown
nav:
path: /components
group:
title: Information Entry
order: 10
toc: 'content'
# Checklist
The check operation of the list.
- Select one or more in a group of list items.
- To use a checkable list, you need to check at least one item by default to make it easier for users to understand that the list can be checked.
## Introduction
In `index.json` Introducing Components in
```json
"usingComponents": {
#if ALIPAY
"ant-checklist": "antd-mini/es/Checklist/index",
#endif
#if WECHAT
"ant-checklist": "antd-mini/Checklist/index",
#endif
}
```
## Code Sample
### Basic use
```xml
<ant-checklist
defaultValue="{{[1]}}"
options="{{options}}"
data-options="{{options}}"
onChange="onChange" />
```
```js
Page({
data: {
options: [
{
value: 1,
title: '可勾选列表项1',
},
{
value: 2,
title: '可勾选列表项2',
},
{
value: 3,
title: '可勾选列表项3',
},
],
},
onChange(v, items, e) {
console.log('当前选中的Value为：', v, items, e);
},
});
```
### Controlled and Multiple Selection
> Incoming `multiple` Property supports multiple selection mode. `value` property and `onChange` Events are used together to achieve state control.
```xml
<ant-checklist
value="{{value}}"
options="{{options}}"
multiple
onChange="onChangeControlled" />
```
```js
Page({
data: {
value: [1, 2],
options: [
{
value: 1,
title: '可勾选列表项1',
},
{
value: 2,
title: '可勾选列表项2',
},
{
value: 3,
title: '可勾选列表项3',
},
],
},
onChangeControlled(value) {
#if ALIPAY
this.setData({ value });
#endif
#if WECHAT
this.setData({ value: value.detail[0] });
#endif
},
});
```
### Custom
> You can customize the check icon and style through the slot.
```xml
<ant-checklist
defaultValue="{{[2]}}"
options="{{options}}"
multiple
onChange="onChange">
<view slot="icon">
<ant-icon
style="color: red"
type="LikeOutline"
className="demo-checklist-checked-icon" />
</view>
<view
slot="content"
slot-scope="props">
title: {{props.item.title}}
</view>
</ant-checklist>
```
### Demo Code
<code src='../../demo/pages/Checklist/index'></code>
## API
| Property | Description | Type | Default Value |
| ---------------------- | ---------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ |
| className | Class Name | string | - |
| content | CheckListItem a custom content area scope slot that receives the item parameter | slot | - |
| defaultValue | Data selected by default | string \| number \| (string \| number)[] | - |
| icon | Customize the selected Icon slot | slot | - |
| multiple | Whether multiple selection is supported | boolean | false |
| options | Configure options for each column | [ChecklistItem](#checklistitem)[] | [] |
| style | Style | string | - |
| value | Selected data | string \| number \| (string \| number)[] | - |
| #if ALIPAY onChange | Trigger a callback when the selected item changes | (value: string \| number \| (string \| number)[], column: [ChecklistItem](#checklistitem) \| [ChecklistItem](#checklistitem)[], event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void |
| #if WECHAT bindchange | Trigger a callback when the selected item changes | (value: string \| number \| (string \| number)[], column: [ChecklistItem](#checklistitem) \| [ChecklistItem](#checklistitem)[], event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void |
### ChecklistItem
| Parameters | Description | Type | Default Value |
| ----------- | -------- | ------- | ------ |
| description | Description | string | - |
| disabled | Disable | boolean | false |
| image | Picture | string | - |
| readonly | Read-only | boolean | false |
| title | Title | string | - |
| value | Value | string | - |
### Theme customization
#### Style Variables
Component provides the following CSS variables, which can be used to customize styles. For more information, see ConfigProvider Components.
| Variable name | Default Value | Dark Mode Default | Remarks |
| ---------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------ |
| --checklist-background-color | <div style="width: 150px; height: 30px; background-color: #1677ff; color: #ffffff;">#1677ff</div> | <div style="width: 150px; height: 30px; background-color: #3086ff; color: #ffffff;">#3086ff</div> | List background color |
| --check-list-item-background-color | <div style="width: 150px; height: 30px; background-color: #ffffff; color: #333333;">#ffffff</div> | <div style="width: 150px; height: 30px; background-color: #1a1a1a; color: #fff;">#1a1a1a</div> | List Item Background Color |
| --check-list-item-hover-background-color | <div style="width: 150px; height: 30px; background-color: #eeeeee; color: #333333;">#eeeeee</div> | <div style="width: 150px; height: 30px; background-color: #2b2b2b; color: #fff;">#2b2b2b</div> | List item hover background color |
| --check-list-item-content-color | <div style="width: 150px; height: 30px; background-color: #333333; color: #ffffff;">#333333</div> | <div style="width: 150px; height: 30px; background-color: #c5cad1; color: #ffffff;">#c5cad1</div> | List Item Content Color |
| --check-list-item-description-color | <div style="width: 150px; height: 30px; background-color: #999999; color: #ffffff;">#999999</div> | <div style="width: 150px; height: 30px; background-color: #616161; color: #ffffff;">#616161</div> | List Item Description Color |