antd-mini
Version:
antd-mini 是支付宝小程序 UI 组件库,遵循 Ant Design 规范。
164 lines (135 loc) • 6.99 kB
Markdown
nav:
path: /components
group:
title: Information Display
order: 8
toc: 'content'
supportPlatform: ['alipay', 'wechat']
# Card
Base card container. When you need to carry text, lists, pictures, paragraphs and other content, use Card card containers to facilitate users to browse.
## Introduction
In `index.json` Introducing Components in
```json
"usingComponents": {
#if ALIPAY
"ant-card": "antd-mini/es/Card/index"
#endif
#if WECHAT
"ant-card": "antd-mini/Card/index"
#endif
}
```
## Code Sample
### Basic Usage
```xml
<ant-card
#if ALIPAY
onOperateClick="handleLinkClick"
#endif
#if WECHAT
bindoperateclick="handleLinkClick"
#endif
title="title"
operateText="operate"
>
<view>
I am the card content
</view>
</ant-card>
```
### Content Separator
```xml
<ant-card
divider="{{true}}"
title="title"
operateText="operate"
>
<view>
Title Content with Split Line
</view>
</ant-card>
```
### Title ceiling
```xml
<ant-card
title="title"
headSticky="{{true}}"
#if ALIPAY
onTitleSticky="handleTitleSticky"
#endif
#if WECHAT
bindtitlesticky="handleLinkClick"
#endif
>
<view style="height: 400px">
Simulate a long card content
</view>
</ant-card>
```
### Card Foldable
```xml
<ant-card
title="title"
needFold="{{true}}"
>
<view>
Content area can be expanded/collapsed
</view>
</ant-card>
```
### Custom Action Buttons
```xml
<ant-card
title="title"
operateText="operateText"
>
<view slot="headerRight">
Custom
</view>
<view>
I am the card content
</view>
</ant-card>
```
### Demo Code
<code src="../../demo/pages/Card/index"></code>
## Property
| Property | Description | Type | Default Value |
| ---------------------------- | ------------------------------------------------------------------- | --------------------------- | ------ |
| className | Container className | string | - |
| config | Card Configuration | [ICardConfig](#ICardConfig) | - |
| title | Card Title | string | - |
| divider | Whether there is a dividing line | boolean | false |
| needFold | Whether a foldable card is required, the operateText needs to be empty, otherwise it needs to be manually unfolded and stowed. | boolean | false |
| foldStatus | Whether it is collapsed or not, passing true will cause it to be collapsed, regardless of whether the needFold is true or not. | boolean | false |
| headSticky | Does the title need ceiling | boolean | false |
| stickyTransparentTitle | Whether the ceiling is on the transparent head page, if so, the height of the transparent head will be calculated automatically. | boolean | false |
| stickyTop | How much distance should the title be from the top when it is sucked | string | - |
| operateText | Default title bar right action button text | string | - |
| #if ALIPAY onOperateClick | Default title bar right operation button click callback | () => void | - |
| #if ALIPAY onFoldChange | Default title bar right collapse expand button click callback | () => void | - |
| #if ALIPAY onTitleSticky | Whether the title area is the callback when the ceiling changes. | (status) => void | - |
| #if WECHAT bindoperateclick | Default title bar right operation button click callback | () => void | - |
| #if WECHAT bindfoldchange | Default title bar right collapse expand button click callback | () => void | - |
| #if WECHAT bindtitlesticky | Whether the title area is the callback when the ceiling changes. | (status) => void | - |
### ICardConfig
| Configuration Item | Description | Type | Default Value |
| ----------- | ------------------------------------- | ------ | ------ |
| foldTapArea | Collapse behavior trigger area, optional`btn`、`header` | string | 'btn' |
## Slot
| Name | Description |
| ----------- | -------------------- |
| Default Slot | Card Content |
| headerTitle | Custom Title Bar Left Title |
| headerRight | Customize the right content of the title bar |
### 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 | Light Mode Default | Dark Mode Default | Remarks |
| ----------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ---------------- |
| --ant-card-bg | <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> | Card background color |
| --ant-card-header-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: #000000;">#c5cad1</div> | Card head title color |
| --ant-card-header-link-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> | Card Head Link Color |
| --ant-card-fold-btn-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> | Card Fold Button Color |