Blazor面包屑概述

的Blazor面包屑组件允许在文件夹结构或网页内导航。它提供了一种按一个或多个步骤向后导航的简单方法。除了内置的导航功能，你可以浏览项目，定义模板对于单个节点，呈现文本和图标/图片，并回应事件．

Breadcrumb组件是为Blazor的Telerik UI，一个具有100个本地组件的专业级UI库，用于构建现代和功能丰富的应用程序。想要试用它，请注册一个30天的免费试用。

下载免费试用

• 基础知识
• 特性

基础知识

为Blazor使用Telerik面包屑:

1. 添加TelerikBreadcrumb标签
2. 提供对象的集合数据属性(请参阅数据绑定文章）
3. 将模型中的字段与节点的绑定模式匹配
   • 在本例中，我们通过仅为Breadcrumb项提供文本来保持简单。看到导航条有关如何使用Breadcrumb在项目中导航的更多细节。

这个例子演示了面包屑的基本配置*@   @code {public List Items {get;设置;} protected override void OnInitialized() {Items = new List {new BreadcrumbItem {Text = "Home"， Icon = "Home"}， new BreadcrumbItem {Text = "Products"}， new BreadcrumbItem {Text = "Computer peripherals"}， new BreadcrumbItem {Text = " keyboard "}， new BreadcrumbItem {Text = "Gaming keyboard "}};}公共类BreadcrumbItem{公共字符串文本{get;设置;}公共字符串图标{get;设置;}公共字符串Url {get;设置;}}}

  @code{telerikk . blazor . components。telerikbreadcrumbref  theBreadcrumbRef {get;设置;} public IEnumerable Items {get;设置;} protected override void OnInitialized() {Items = new List {new BreadcrumbItem {Text = "Item1"}， new BreadcrumbItem {Text = "Item2"}， new BreadcrumbItem {Text = "Item3"}};}公共类BreadcrumbItem{公共字符串文本{get;设置;}公共字符串图标{get;设置;}公共字符串Url {get; set; } } }

特性

面包屑提供以下特性:

• 数据-面包屑中所有项目的平面数据集合。看到数据绑定文章了解详情。

• CollapseMode-指定如果Breadcrumb项不能放在单行中，则如何显示它们。欲知详情，请浏览崩溃模式篇文章。

• 宽度- Breadcrumb组件的宽度。

• 高度-面包屑组件的高度。

• 类-将在Breadcrumb的主包装元素上渲染的CSS类。

• ItemTemplate-为面包屑的项目定义一个自定义模板。欲知详情，请浏览模板篇文章。

• SeparatorTemplate定义自定义模板面包屑路径分隔符．欲知详情，请浏览模板篇文章。

• 事件——您可以响应用户操作来实现业务逻辑。有关更多细节，请参阅事件篇文章。

另请参阅

• 现场演示:面包屑概述
• API参考