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

Breadcrumb面包屑

显示当前页面在系统层级结构中的位置,并能向上返回。

何时使用

  • 当系统拥有超过两级以上的层级结构时;
  • 当需要告知用户『你在哪里』时;
  • 当需要向上导航的功能时。

Examples

最简单的用法。

expand code expand code

自动匹配路由,利用菜单数据自动生成导航(首页的节点还需自己设置)。

expand code expand code

面包屑支持下拉菜单。

expand code expand code

图标放在文字前面。

expand code expand code

使用 Separator=">" 可以自定义分隔符。

expand code expand code

Breadcrumb API#

属性 描述 类型 默认值
ChildContent 属性面包屑的内容。应包含 BreadcrumbItem 元素 RenderFragment --
AutoGenerate 属性当前未使用。计划未来发展。 Boolean false
Separator 属性项目之间的分隔符 String /
Id 属性组件 HTML 的 ID String Uniquely Generated ID
Class 属性为 DOM 元素指定一个或多个类名。 String --
Style 属性指定 DOM 元素的内联样式。 String --
RefBack 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 ForwardRef --

BreadcrumbItem API#

属性 描述 类型 默认值
ChildContent 属性项目的内部内容 RenderFragment --
Overlay 属性覆盖下拉菜单 RenderFragment --
Href 属性项目的链接。提供这个将 ChildContent 包装在该链接的锚标记中。 String --
OnClick 属性点击回调 EventCallback<MouseEventArgs> --
Id 属性组件 HTML 的 ID String Uniquely Generated ID
Class 属性为 DOM 元素指定一个或多个类名。 String --
Style 属性指定 DOM 元素的内联样式。 String --
RefBack 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 ForwardRef --
Affix图钉 Dropdown下拉菜单
文档已更新,请点击 此处 更新。
A new version of this app is available. Click here to update.