logo
为了能更好地了解您的商业使用需求,请参与 Ant Design Blazor 商业应用调查,一起建设商业应用社区,为企业系统研发赋能!

Card卡片

Examples

包含标题、内容、操作区域。 可通过设置size为default或者small,控制尺寸

expand code expand code

在灰色背景上使用无边框的卡片。

expand code expand code

可以利用 Card.Meta 支持更灵活的内容。

expand code expand code

一种常见的卡片内容区隔模式。

expand code expand code

在系统概览页面常常和栅格进行配合。

expand code expand code

可以放在普通卡片内部,展示多层级结构的信息。

expand code expand code

数据读入前会有文本块样式。

expand code expand code

一种支持封面、头像、标题和描述信息的卡片。

expand code expand code

只包含内容区域。

expand code expand code

可承载更多内容。

expand code expand code

Card API#

属性 描述 类型 默认值
ChildContent 属性卡片正文的内容。如下图AntDesign.Card.Body RenderFragment --
Body 属性卡片正文的内容。如上所示AntDesign.Card.ChildContent请改用 ChildContent

Obsolete 将在未来的版本中删除。
RenderFragment --
ActionTemplate 属性要放入卡片操作部分的内容。优先于 AntDesign.Card.Actions RenderFragment --
Bordered 属性切换卡周围边框的渲染 Boolean true
Hoverable 属性使卡片可悬停 Boolean false
Loading 属性在获取卡片内容时显示加载指示器 Boolean false
BodyStyle 属性正文部分的样式字符串 String --
Cover 属性卡片的封面内容。显示在标题下方和正文上方 RenderFragment --
Actions 属性卡片操作 IList<RenderFragment> --
Type 属性卡片样式类型,可设置为内部或不设置 String --
Size 属性卡片尺寸 String --
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 --
Calendar日历 Carousel走马灯
文档已更新,请点击 此处 更新。
A new version of this app is available. Click here to update.