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

PageHeader页头

页头位于页容器中,页容器顶部,起到了内容概览和引导页级操作的作用。包括由面包屑、标题、页面内容简介、页面级操作等、页面级导航组成。

何时使用

当需要使用户快速理解当前页是什么以及方便用户使用页面功能时使用,通常也可被用作页面间导航。

Examples

标准页头,适合使用在需要简单描述的场景。

expand code expand code

默认 PageHeader 是透明底色的。在某些情况下,PageHeader 需要自己的背景颜色。

expand code expand code

带面包屑页头,适合层级比较深的页面,让用户可以快速导航。

expand code expand code

使用了 PageHeader 提供的所有能力。

expand code expand code

使用操作区,并自定义子节点,适合使用在需要展示一些复杂的信息,帮助用户快速了解这个页面的信息和操作。

expand code expand code

在不同大小的屏幕下,应该有不同的表现

expand code expand code

PageHeader API#

属性 描述 类型 默认值
Ghost 属性使背景透明 Boolean false
BackIcon 属性后退按钮的图标 OneOf<Boolean?, String> --
BackIconTemplate 属性返回按钮 RenderFragment RenderFragment --
Title 属性标题 String --
TitleTemplate 属性标题 RenderFragment --
Subtitle 属性副标题 String --
SubtitleTemplate 属性副标题 RenderFragment --
OnBack 属性点击返回时的回调 EventCallback --
PageHeaderContent 属性内容部分 RenderFragment --
PageHeaderFooter 属性页脚部分 RenderFragment --
PageHeaderBreadcrumb 属性面包屑部分 RenderFragment --
PageHeaderAvatar 属性头像部分 RenderFragment --
PageHeaderTitle 属性标题部分请改用 TitleTemplate

Obsolete 将在未来的版本中删除。
RenderFragment --
PageHeaderSubtitle 属性副标题部分请改用 SubtitleTemplate

Obsolete 将在未来的版本中删除。
RenderFragment --
PageHeaderTags 属性标题后的标签部分 RenderFragment --
PageHeaderExtra 属性操作区,在标题行的行尾 RenderFragment --
Id 属性组件 HTML 的 ID String Uniquely Generated ID
Class 属性为 DOM 元素指定一个或多个类名。 String --
Style 属性指定 DOM 元素的内联样式。 String --
RefBack 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 ForwardRef --
Menu导航菜单 Pagination分页
文档已更新,请点击 此处 更新。
A new version of this app is available. Click here to update.