UNPKG

antd-mini

Version:

antd-mini 是支付宝小程序 UI 组件库,遵循 Ant Design 规范。

164 lines (135 loc) 6.99 kB
--- 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 |