导航模板

面包屑可以通过使用模板进行定制。本文解释了该组件的可用模板。

• ItemTemplate
• SeparatorTemplate

ItemTemplate

的< ItemTemplate >控件的呈现数据绑定项在Breadcrumb中，以防你想使用不同于默认的渲染。

这个模板接收一个上下文参数，该参数为数据模型类型，表示当前项。

@*自定义Breadcrumb项目的呈现*@    @if(上下文。Text == "Item2") {❕} @context. Text == "Item2")Text     @code {public IEnumerable Items {get;设置; } protected override void OnInitialized() { Items = new List { new BreadcrumbItem { Text = "Item1", Details = "Info for Item 1"}, new BreadcrumbItem { Text = "Item2", Details = "Info for Item 2"}, new BreadcrumbItem { Text = "Item3", Details = "Info for Item 3"}, new BreadcrumbItem { Text = "Item4", Details = "Info for Item 4"} }; } public class BreadcrumbItem { public string Text { get; set; } public string Details { get; set; } } }

SeparatorTemplate

的< SeparatorTemplate >允许您控制面包屑分隔符的呈现，因此您可以在组件项之间定义自定义内容。

@*自定义Breadcrumb Separator的呈现*@      @code {public IEnumerable Items {get;设置;} protected override void OnInitialized() {Items = new List {new BreadcrumbItem {Text = "Item1"， Details = "Item1信息"}，new BreadcrumbItem {Text = "Item2"， Details = "Item2信息"}，new BreadcrumbItem {Text = "Item3"， Details = "Item3信息"}，new BreadcrumbItem {Text = "Item4"， Details = "Item4信息"}};}公共类BreadcrumbItem{公共字符串文本{获取;设置;} public string详细信息{get;设置;}}}

另请参阅

• 现场演示:面包屑模板