🌏 Translated with the assistance of DeepSeek and ChatGPT

Card

The Card component is used to group related content together in a container.

Basic Usage

The Card component shows the header area with a title by default, and does not show the footer. Use the title prop to set the header text.

Card Title

This is the card body content.

You can put any content here.

Hide source code

Shape & Border Radius

The shape prop controls the card shape, defaulting to 'round' (rounded corners). 'rect' gives right-angle corners.

borderRadius sets a custom corner radius and has higher priority than shape.

Round Card (Default)

Default shape is round with pixelSize × 4 border radius.

Rect Card

Rect shape has no rounded corners.

Custom Radius

Custom border radius of 28px.

Custom Radius Array

Individual corner radii: top-left 12px, top-right 2px, bottom-right 12px, bottom-left 2px.

Hide source code

Card Border

The bordered prop controls whether the card border is displayed.

With Border

This card has a border (default).

No Border

This card has no border.

Hide source code

Close Button

The closable prop shows a close button that triggers a close event when clicked.

Closable Card

Click the X icon in the header to close this card.

Hide source code

Custom Header & Footer

Use the header and footer slots to customize content.

With Header Only

Card with header visible (default).

Footer is hidden by default.

Custom Header

Card body content here.

Footer Content

No Header

This card does not show the header section.

Hide source code

API

CardProps

Attribute	Type	Optional	Default	Description	Version
title	string	True		The title text of the card.	0.2.0
shape	CardShape	True	'rect'	The card shape.	0.2.0
borderRadius	NumberOrPercentage | NumberOrPercentage[]	True		Custom border radius. Accepts a single value or an array of four values.	0.2.0
bordered	boolean	True	true	Whether to show the card border.	0.2.0
headerProps	RestAttrs	True		Additional attributes for the header section.	0.2.0
bodyProps	RestAttrs	True		Additional attributes for the body section.	0.2.0
footerProps	RestAttrs	True		Additional attributes for the footer section.	0.2.0
closable	boolean	True	false	Whether to show the close button.	0.2.0
pollSizeChange	boolean	True	false	Whether to redraw when the container size changes.	0.2.0

CardEvents

Event	Parameter	Description	Version
close	e: MouseEvent	Callback triggered when the close button is clicked.	0.2.0

CardSlots

Slot	Parameter	Description	Version
header		Custom content for the header section.	0.2.0
default		The main body content of the card.	0.2.0
footer		Custom content for the footer section.	0.2.0