antd-mini
Version:
antd-mini 是支付宝小程序 UI 组件库，遵循 Ant Design 规范。
194 lines (166 loc) • 7.92 kB
Markdown
---
nav:
path: /components
group:
title: Navigation
order: 6
toc: 'content'
---
# Grid
The palace is used for navigation of multiple sub-functions in the business and has a higher screen effect than the form of a list.
## Introduction
In `index.json` Introducing Components in
```json
"usingComponents": {
#if ALIPAY
"ant-grid": "antd-mini/es/Grid/index"
#endif
#if WECHAT
"ant-grid": "antd-mini/Grid/index"
#endif
}
```
## Code Sample
### Basic use
```xml
<ant-grid
items="{{items}}"
iconSize="{{36}}"
columns="{{3}}"
/>
```
```js
Page({
data: {
items: [
{
title: 'title text',
icon: 'https://gw.alipayobjects.com/mdn/rms_3a7189/afts/img/A*L8FjQ7lSdq4AAAAAAAAAAAAAARQnAQ',
},
{
title: 'title text',
icon: 'https://gw.alipayobjects.com/mdn/rms_3a7189/afts/img/A*L8FjQ7lSdq4AAAAAAAAAAAAAARQnAQ',
},
{
title: 'title text',
icon: 'https://gw.alipayobjects.com/mdn/rms_3a7189/afts/img/A*L8FjQ7lSdq4AAAAAAAAAAAAAARQnAQ',
},
],
},
});
```
### 3 Columns-With Description
```xml
<ant-grid
items="{{items3withDesc}}"
iconSize="{{36}}"
columns="{{3}}" />
```
```js
Page({
data: {
items: [
{
title: 'title text',
icon: 'https://gw.alipayobjects.com/mdn/rms_3a7189/afts/img/A*L8FjQ7lSdq4AAAAAAAAAAAAAARQnAQ',
description: 'description',
},
{
title: 'title text',
icon: 'https://gw.alipayobjects.com/mdn/rms_3a7189/afts/img/A*L8FjQ7lSdq4AAAAAAAAAAAAAARQnAQ',
description: 'description',
},
{
title: 'title text',
icon: 'https://gw.alipayobjects.com/mdn/rms_3a7189/afts/img/A*L8FjQ7lSdq4AAAAAAAAAAAAAARQnAQ',
description: 'description',
},
],
},
});
```
### element horizontal layout
```xml
<ant-grid
items="{{items}}"
columns="{{3}}"
gridItemLayout="horizontal"
/>
```
### Custom
```xml
#if ALIPAY
<ant-grid
items="{{items}}"
columns="{{5}}">
<view
slot="icon"
slot-scope="props">
<ant-badge
a:if="{{props.value.tag}}"
offsetX="-10px"
type="text"
text="{{props.value.tag}}">
<image
src="{{props.value.icon}}"
style="width: 44px; height: 44px" />
</ant-badge>
<image
a:else
src="{{props.value.icon}}"
style="width: 44px; height: 44px" />
</view>
<view
slot="title"
slot-scope="props">
Item {{props.index 1}}
</view>
<view
slot="description"
slot-scope="props">
Description {{props.index 1}}
</view>
</ant-grid>
#endif
#if WECHAT
由于微信小程序平台的限制, Grid In微信暂时不支持 Slot
#endif
```
### Demo Code
<code src='../../demo/pages/Grid/index'></code>
## API
| Property | Description | Type | Default Value |
| --------------------------- | ------------------------------------------------------ | ------------------------------------- | ---------- |
| className | Class Name | string | - |
| columns | The number of elements displayed per row,`default` Mode effective | number | 5 |
| description | Description slot, receiving value, index | slot | - |
| gridItemLayout | item layout, optional `vertical`(Vertical)`horizontal`(Horizontal) | string | `vertical` |
| icon | Icon slot, receiving value, index | slot | - |
| iconSize | Icon size in px | number | - |
| iconStyle | Icon style type, optional `normal` `circle` | string | `normal` |
| items | Content Text | [GridItem](#griditem)[] | - |
| mode | Style type, optional `default`(Tile)`scroll`(Sliding) | string | `default` |
| paginationFillColor | Page break background color,`scroll` Mode effective | string | - |
| paginationFrontColor | Page break color,`scroll` Mode effective | string | - |
| showDivider | Show split line | boolean | - |
| style | Style | string | - |
| title | Header slot, receiving value, index | slot | - |
| #if ALIPAY onTap | Click on each element to trigger | (item: [GridItem](#griditem)) => void | |
| #if ALIPAY onFirstAppear | Triggered when the first visible area of the current element reaches 50% | (item: [GridItem](#griditem)) => void | |
| #if WECHAT bindtap | Click on each element to trigger | (item: [GridItem](#griditem)) => void | - |
| #if WECHAT bindfirstappear | Triggered when the first visible area of the current element reaches 50% | (item: [GridItem](#griditem)) => void | - |
#### GridItem
| Parameters | Description | Type | Default Value |
| ----------- | ----------------------------------------------------- | ------ | ------ |
| description | Description | string | - |
| icon | icons, support images and [Icon](./Icon) | string | - |
| iconStyle | Icon style type, with priority higher than grid, optional `normal` `circle` | string | - |
| title | Title | 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 |
| ---------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------ |
| --ant-grid-title-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> | Grid Title Color |
| --ant-grid-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> | Grid Description Color |
| --ant-grid-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> | Grid Border Color |