eo-card-item
<eo-card-item>信息类卡片 —— 通用卡片
Examples
Basic
showActions
Single Expanded Area
Multiple Expanded Area
Cover
avatarPlacement
selected
borderColor
Tag
Style type
stacked
cardStyle
Properties
| Name | Description | Type | Default | Required |
|---|---|---|---|---|
hasHeader | 是否有顶部小标题 | boolean | ||
cardTitle | 卡片标题 | string | ||
description | 描述信息 | string | ||
auxiliaryText | 顶部辅助文字 | string | ||
avatar | 图标 | IconAvatar | ImgAvatar | ||
href | 设置 | LinkProps["href"] | ||
url | 链接地址 | LinkProps["url"] | ||
target | 链接跳转目标 | LinkProps["target"] | ||
actions | 操作按钮组 | ActionType[] | ||
showActions | 展示操作按钮组 | "always" | "hover" | "always" | |
selected | 是否选中 | boolean | ||
styleType | 卡片样式类型 | "grayish" | ||
hasCover | 是否使用卡片封面 | boolean | ||
coverImage | 卡片封面背景图片 | string | ||
coverColor | 卡片封面背景颜色（使用纯色背景） | string | ||
coverImageSize | 卡片封面图片尺寸 ，配置参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-size | React.CSSProperties["backgroundSize"] | ||
avatarPosition | 图标是否放置在卡片封面 | "content" | "cover" | ||
avatarPlacement | 图标位置，在 avatarPosition 不为 cover 时有效 | "left" | "title-left" | "left" | |
tagConfig | TagConfig | |||
borderColor | 卡片边框颜色 | string | ||
stacked | 是否堆叠 | boolean | ||
cardStyle | 卡片样式 | React.CSSProperties | ||
cardBodyStyle | 卡片内容区域样式 | React.CSSProperties | ||
cardTitleStyle | 卡片标题样式 | React.CSSProperties | ||
textContent | 文本内容 | string |
Slots
| Name | Description |
|---|---|
| (default) | 内容区域，通常放置卡片自定义内容 |
expanded-area-1 | 扩展区域 1，通常放置标签信息 |
expanded-area-2 | 扩展区域 2，通常放置操作和其他属性信息（图标/头像/小字描述/统计信息） |
Events
| Name | Description | Event Detail |
|---|---|---|
action.click | 操作按钮点击事件 | SimpleActionType |
tag.click | 徽标点击事件 | void |
Type references
IconAvatar
| Name | Description | Type | Default | Required |
|---|---|---|---|---|
containerSize | string | |||
icon | GeneralIconProps | ✅ | ||
color | string | |||
size | number | |||
shape | "circle" | "square" | "round-square" | |||
bgColor | string |
ImgAvatar
| Name | Description | Type | Default | Required |
|---|---|---|---|---|
containerSize | string | |||
imgSrc | string | ✅ | ||
imgStyle | CSSProperties | |||
shape | "circle" | "square" | "round-square" | |||
bgColor | string |
TagConfig
| Name | Description | Type | Default | Required |
|---|---|---|---|---|
text | string | |||
icon | GeneralIconProps | |||
bgColor | string | |||
color | string |