Skip to content
On this page

Card 卡片

放入你想展示的内容

基本使用

title 属性可以配置卡片的标题

卡片标题
Card 卡片
开启

圆角卡片

round 是否为圆角卡片

圆角的
Card 卡片
开启

不同状态

shadow 属性可以配置阴影样式

从不显示
Hover 显示
总是显示
开启

自定义样式

多种配置项可自定义卡片的样式

卡片标题
Card 卡片
开启

可关闭的

close 可配置带有关闭按钮的卡片

卡片标题
Card 卡片
开启

Attributes

参数说明类型可选值默认值
title卡片标题string————
round是否为圆角卡片boolean——false
padding卡片内边距string————
shadow阴影样式CardShadowhover always——
border-color自定义边框颜色string————
background自定义背景颜色string————
title-color自定义 title 颜色string————
title-boldtitle 是否加粗boolean——false
close是否可关闭boolean——false
on-close是否可关闭CardClose————

Slots

名称说明
default默认内容
header自定义头部

Interface

组件导出以下类型定义:

ts
import type { CardInstance, CardProps, CardShadow, CardClose } from 'fighting-design'

CardShadow

ts
type CardShadow = 'hover' | 'always'

CardClose

ts
type CardClose = (target: boolean) => void

样式变量

组件提供了下列 CSS 变量,可用于自定义样式

名称描述
--card-border-color边框颜色
--card-background背景颜色
--card-padding内边距
--card-title-color标题颜色

Contributors