eo-card
<eo-card>Alias:
<containers.general-card>通用卡片容器构件。
Examples
Fill Vertical
Vertical Center
Hide Split
Extra Slot
titleSuffix Slot
Header Icon
Header Style
Background
Outline
Properties
| Name | Description | Type | Default | Required |
|---|---|---|---|---|
cardTitle | 标题 | string | ||
headerIcon | 头部图标 | GeneralIconProps | ||
fillVertical | 自动撑满父容器。注意不可以同时使用 | boolean | ||
verticalCenter | 垂直居中。注意不可以同时使用 | boolean | ||
hasExtraSlot | 是否右上角有操作区 slot | boolean | ||
operationButtons | 右上角的操作按钮列表 | OperationButton[] | [] | |
headerStyle | 头部样式 | React.CSSProperties | ||
bodyStyle | 内容区域样式 | React.CSSProperties | ||
background | 背景 | boolean | string | ||
outline | 卡片轮廓。默认情况下，使用默认背景填充色，8.2 下默认则为无描边且无填充。 | CardOutline | "default" | |
hideSplit | 是否隐藏分割线 | boolean | ||
themeVariant | 主题变体 | "default" | "elevo" | ||
textContent | 文本内容 | string |
Slots
| Name | Description |
|---|---|
| (default) | 卡片内容 |
extra | 头部右侧拓展元素 |
titleSuffix | 标题后缀的插槽 |
Type references
OperationButton
| Name | Description | Type | Default | Required |
|---|---|---|---|---|
id | string | ✅ | ||
eventName | string | ✅ | ||
configProps | ButtonProps & { icon?: string } | ✅ | ||
tooltip | string | |||
text | string | |||
needData | boolean |
CardOutline
"border" | "shadow" | "background" | "none" | "default"