Ant Design Blazor
Card卡片
通用卡片容器.
何时使用
- 最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。
Examples
包含标题、内容、操作区域。
可通过设置size为default或者small，控制尺寸
在灰色背景上使用无边框的卡片。
可以利用 Card.Meta 支持更灵活的内容。
一种常见的卡片内容区隔模式。
在系统概览页面常常和栅格进行配合。
可以放在普通卡片内部，展示多层级结构的信息。
数据读入前会有文本块样式。
一种支持封面、头像、标题和描述信息的卡片。
只包含内容区域。
可承载更多内容。用 StandaloneInCard 属性可在 Card 中独立使用 Tabs，以避免与其他内容冲突。
Card API#
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| ChildContent | 属性卡片正文的内容。如下图AntDesign.Card.Body |
RenderFragment | -- |
| Body | 属性卡片正文的内容。如上所示AntDesign.Card.ChildContent请改用 ChildContentObsolete 将在未来的版本中删除。 |
RenderFragment | -- |
| ActionTemplate | 属性要放入卡片操作部分的内容。优先于 AntDesign.Card.Actions |
RenderFragment | -- |
| Bordered | 属性切换卡周围边框的渲染 | Boolean | true |
| Hoverable | 属性使卡片可悬停 | Boolean | false |
| Loading | 属性在获取卡片内容时显示加载指示器 | Boolean | false |
| BodyStyle | 属性正文部分的样式字符串 | String | -- |
| Cover | 属性卡片的封面内容。显示在标题下方和正文上方 | RenderFragment | -- |
| Actions | 属性卡片操作 | IList<RenderFragment> | -- |
| Type | 属性卡片样式类型，可设置为内部或不设置 | CardType | -- |
| Size | 属性卡片尺寸 | CardSize | -- |
| Title | 属性标头的标题字符串 | String | -- |
| TitleTemplate | 属性标题的标题内容。优先于 AntDesign.Card.Title |
RenderFragment | -- |
| Extra | 属性要在卡片右上角呈现的内容 | RenderFragment | -- |
| Id | 属性组件 HTML 的 ID | String | Uniquely Generated ID |
| Class | 属性为 DOM 元素指定一个或多个类名。 | String | -- |
| Style | 属性指定 DOM 元素的内联样式。 | String | -- |
| RefBack | 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 |
ForwardRef | -- |
CardGrid API#
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| ChildContent | 属性网格该部分的内容 | RenderFragment | -- |
| Hoverable | 属性如果该部分应该悬停。如果为 true，则在悬停时添加阴影并抬起。 | Boolean | false |
| Id | 属性组件 HTML 的 ID | String | Uniquely Generated ID |
| Class | 属性为 DOM 元素指定一个或多个类名。 | String | -- |
| Style | 属性指定 DOM 元素的内联样式。 | String | -- |
| RefBack | 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 |
ForwardRef | -- |
CardMeta API#
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| Title | 属性标题字符串 | String | -- |
| TitleTemplate | 属性标题内容。优先于 AntDesign.CardMeta.Title |
RenderFragment | -- |
| Description | 属性描述字符串 | String | -- |
| DescriptionTemplate | 属性说明内容。优先于 AntDesign.CardMeta.Description |
RenderFragment | -- |
| Avatar | 属性头像字符串。将被传递给Avatar组件的AntDesign.Avatar.Src |
String | -- |
| AvatarTemplate | 属性头像内容。优先于 AntDesign.CardMeta.Avatar |
RenderFragment | -- |
| Id | 属性组件 HTML 的 ID | String | Uniquely Generated ID |
| Class | 属性为 DOM 元素指定一个或多个类名。 | String | -- |
| Style | 属性指定 DOM 元素的内联样式。 | String | -- |
| RefBack | 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 |
ForwardRef | -- |
CardAction API#
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| ChildContent | 属性卡片的操作。 | RenderFragment | -- |
| Id | 属性组件 HTML 的 ID | String | Uniquely Generated ID |
| Class | 属性为 DOM 元素指定一个或多个类名。 | String | -- |
| Style | 属性指定 DOM 元素的内联样式。 | String | -- |
| RefBack | 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 |
ForwardRef | -- |