antd-mini
Version:
antd-mini 是支付宝小程序 UI 组件库，遵循 Ant Design 规范。
150 lines (126 loc) • 6.5 kB
Markdown
---
nav:
path: /components
group:
title: Information Display
order: 8
toc: 'content'
---
# List
Generic lists can be clean and efficient to carry text, lists, pictures, paragraphs and other elements.
## Introduction
In `index.json` Introducing Components in
```json
"usingComponents": {
#if ALIPAY
"ant-list": "antd-mini/es/List/index"
#endif
#if WECHAT
"ant-list": "antd-mini/List/index"
#endif
}
```
## Code Sample
### Basic use
```xml
<ant-list
header="basic use"
radius="{{true}}"
>
<ant-list-item>1</ant-list-item>
<ant-list-item>2</ant-list-item>
<ant-list-item>3</ant-list-item>
</ant-list>
```
### List Item Configuration
```xml
<ant-list header="List Item Configuration">
<ant-list-item
className="ant-list-item"
disabled="{{true}}"
image="PayCircleOutline"
brief="Total assets"
extra="Detail infos"
showDivider="{{true}}"
>
Total assets
</ant-list-item>
<ant-list-item
style=""
image="SetOutline"
arrow="right"
extraBrief="Detail infos"
>
Setup
</ant-list-item>
</ant-list>
```
### List item clickable
```xml
<ant-list
header="List item clickable"
radius="{{radius}}"
>
<ant-list-item
image="PayCircleOutline"
#if ALIPAY
onTap="handleTap"
#endif
brief="Total assets"
extra="Detail infos"
data-info="Total assets"
>
Total assets
</ant-list-item>
<ant-list-item
image="SetOutline"
arrow="right"
extraBrief="Detail infos"
#if ALIPAY
catchTap="handleTap"
#endif
data-info="config"
>
Setup
</ant-list-item>
</ant-list>
```
### Demo Code
<code src='../../demo/pages/List/index'></code>
## API
### List
| Property | Description | Type | Default Value |
| --------- | ---------- | -------------- | ------ |
| className | Class Name | string | - |
| footer | Bottom Description | string \| slot | - |
| header | Head Description | string \| slot | - |
| radius | Whether with rounded corners | boolean | false |
| style | Style | string | - |
### ListItem
| Property | Description | Type | Default Value |
| ------------------------ | -------------------------------------------------------- | ------------------ | ------ |
| arrow | right arrow, optional `right`、`up`、`down`, pass true `right` | string \| boolean | - |
| brief | Second line of information | string \| slot | - |
| className | Class Name | string | - |
| disabled | Disable | boolean | false |
| extra | Extra right | string \| slot | - |
| extraBrief | Auxiliary information on the right side | string \| slot | - |
| image | Picture on the left | string | - |
| radius | Whether with rounded corners | boolean | false |
| showDivider | Show underline or not | boolean | true |
| style | Style | string | - |
| title | Header Information | string \| slot | - |
| #if ALIPAY catchTap | Callback triggered when clicked | (e: Event) => void |
| #if ALIPAY onTap | Callback triggered when clicked | (e: Event) => void |
### 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 |
| ------------------------ | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ---------------- |
| --list-header-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 head color |
| --list-footer-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 bottom color |
| --list-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: #ffffff;">#1a1a1a</div> | List background color |
| --list-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 Content Text Color |
| --list-extra-brief-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 Extra Brief Color |
| --list-item-border-color | <div style="width: 150px; height: 30px; background-color: #eeeeee; color: #333333;">#eeeeee</div> | <div style="width: 150px; height: 30px; background-color: #2b2b2b; color: #ffffff;">#2b2b2b</div> | List Item Border Color |
| --list-item-text-color | <div style="width: 150px; height: 30px; background-color: #cccccc; color: #333333;">#cccccc</div> | <div style="width: 150px; height: 30px; background-color: #474747; color: #ffffff;">#474747</div> | List Item Text Color |