Introduction

The card component is used to wrap content in a card container, providing unified styling and interaction effects. It supports custom content, border styles, and shadow effects, and supports layout specifications for different scenarios.

Usage

Import locally by configuring it in the index.json of the page or component where it is needed.

"usingComponents": {
  "fs-card": "ava-ui/fxui/fs-card/index"
}

Code Demos

Card Type Showcase

Provides three card types to meet different scenario needs:

• Full-width card: suitable for scenarios such as list pages, displayed full-width
• Rounded card: suitable for scenarios such as detail pages, with rounded corners on all sides
• Multi-component card: suitable for scenarios where multiple components are combined and displayed, with dividers

Size Specification Showcase

Provides two size specifications to suit different scenarios:

• large: suitable for home, list, detail, work-circle, and create/edit pages
• small: suitable for enterprise messaging, my profile, and other scenarios

Layout Specification Showcase

Provides three layout specifications, effective only for the large size, suitable for different business scenarios:

• Layout 1: Home / detail / work-circle card (large size)

  • Title: 18px bold
  • Inner spacing: 16px
  • Suitable scenarios: home, detail, work-circle, and other important information display scenarios

• Layout 2: Create/edit page card (large size)

  • Title: 16px bold
  • Inner spacing: 8px
  • Suitable scenarios: compact layout scenarios such as create/edit pages

• Layout 3: Enterprise messaging - customer group sidebar customer detail page card (large size)

  • Title: 14px bold
  • Inner spacing: 16px
  • Suitable scenarios: cards within the enterprise messaging customer group sidebar customer detail page

Note: Layout specifications only apply to cards of large size; small size is not affected.

Action Bar Showcase

The card supports adding an action area on the right side of the title bar to display buttons, links, and other action items:

• Use the actions slot to add action items
• Supports custom action item styles
• Suitable for scenarios that require quick actions

Skeleton Screen Showcase

Supports the skeleton screen feature to optimize the loading experience:

• Configurable skeleton screen type
• Supports custom skeleton screen count
• Controllable skeleton screen animation effect

Clear Inner/Outer Spacing Showcase

Supports clearing the inner and outer spacing of the card to meet special layout needs:

• cleanCardPadding: clear all inner spacing
• cleanHorizontalPadding: clear only horizontal inner spacing
• cleanCardMargin: clear the bottom outer spacing
• Suitable for scenarios that require custom spacing

Card Spacing (componentSpacing Property)

The vertical spacing (margin-top, unit px, type Number) between cards can be flexibly set via the componentSpacing property:

Background Style Showcase

Supports custom card background color or background style to meet different design needs:

• background: set the background color or background style
• Supports solid color, gradient, image, and other background styles
• Suitable for scenarios that require special visual effects

Custom Corner Radius Showcase

Supports custom card corner radius to meet different design specifications:

• borderRadius: set the corner radius size
• Supports px, rpx, %, and other units
• Can override the default corner radius style
• Suitable for scenarios that require a specific corner radius effect

API

Parameters

| Parameter | Description | Type | Options | Default | |---------- |-------- |---------- |------------- |-------- |-------- | | title | Component title | string | — | '' | | titleStyle | Custom title style | string | — | '' | | layoutStyleType | Layout type | number | 0-Full-width card 1-Rounded card multiple-cmpt-card-Multi-component card | 0 | | size | Card size | string | large-suitable for home, list, detail, work-circle, and create/edit pages; small-suitable for enterprise messaging and my profile | 'large' | | layout | Layout specification (only effective for large size) | number | 1-Home/detail/work-circle card (inner spacing 16px) 2-Create/edit page card (inner spacing 8px) 3-Enterprise messaging customer group sidebar customer detail page card (inner spacing 16px) | 1 | | cleanCardPadding | Whether to clear inner spacing | boolean | — | false | cleanHorizontalPadding | Whether to clear horizontal inner spacing | boolean | — | false | | cleanCardMargin | Whether to clear bottom spacing | boolean | — | false | background | Component background color or background style | string | — | '' | | borderRadius | Custom corner radius size | string | — | '' | | showSkeletonScreen | Whether to show skeleton screen | boolean | — | false | skeletonScreenType | Skeleton screen type | string | — | 'text' | skeletonScreenCount | Skeleton screen count | number | — | 2 | skeletonScreenDisabledAnimation | Whether to disable skeleton screen animation | boolean | — | true | componentSpacing | Spacing between cards (margin-bottom, unit px) | number | — | 0 | | extStyle | External custom style | string | — | '' |

Slot

Name	Description
content	Card content
actions	Card action area

打开预览