Fighting DesignCard 卡片
放入你想展示的内容
基本使用
title 属性可以配置卡片的标题
开启
圆角卡片
round 是否为圆角卡片
开启
不同状态
shadow 属性可以配置阴影样式
开启
自定义样式
多种配置项可自定义卡片的样式
开启
可关闭的
close 可配置带有关闭按钮的卡片
开启
Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
title | 卡片标题 | string | —— | —— |
round | 是否为圆角卡片 | boolean | —— | false |
padding | 卡片内边距 | string | —— | —— |
shadow | 阴影样式 | CardShadow | hover always | —— |
border-color | 自定义边框颜色 | string | —— | —— |
background | 自定义背景颜色 | string | —— | —— |
title-color | 自定义 title 颜色 | string | —— | —— |
title-bold | title 是否加粗 | 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 | 标题颜色 |