eo-card-item
<eo-card-item>信息类卡片 —— 通用卡片
Examples
Basic
showActions
Single Expanded Area
Multiple Expanded Area
Cover
cardStyle
Style type
selected
Tag
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" | ||
tagConfig | TagConfig | |||
cardStyle | 卡片样式 | React.CSSProperties |
Slots
| Name | Description |
|---|---|
expanded-area-1 | 扩展区域 1，通常放置标签信息 |
expanded-area-2 | 扩展区域 2，通常放置操作和其他属性信息（图标/头像/小字描述/统计信息） |
Events
| Name | Description | Event Detail |
|---|---|---|
tag.click | 徽标点击事件 | void |
Type references
IconAvatar
| Name | Type | Required | Description |
|---|---|---|---|
containerSize | string | ||
icon | GeneralIconProps | ✅ | |
color | string | ||
size | number | ||
shape | "circle" | "square" | "round-square" | ||
bgColor | string |
ImgAvatar
| Name | Type | Required | Description |
|---|---|---|---|
containerSize | string | ||
imgSrc | string | ✅ | |
imgStyle | CSSProperties | ||
shape | "circle" | "square" | "round-square" | ||
bgColor | string |
TagConfig
| Name | Type | Required | Description |
|---|---|---|---|
text | string | ||
icon | GeneralIconProps | ||
bgColor | string | ||
color | string |