Blazor PanelBar概述

的Blazor PanelBar组件显示数据（平或分层)在手风琴式结构中。除了内置的导航功能，您可以在项及其子项之间导航，定义模板，呈现文本和图标/图片，并回应事件．

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

下载免费试用

正在创建Blazor面板栏

1. 添加TelerikPanelBar标签
2. 填充数据属性与您希望显示在面板栏中的项的集合。组件将自动识别属性名，如Id，ParentId，文本还有一些其他的。否则,使用绑定配置自定义属性名称．

@*向PanelBar提供一个扁平的模型集合*@   @code {public List Items {get;设置;}公共类PanelBarItem{公共字符串文本{获取;设置;} public bool禁用{get;设置;}公共字符串Url {get;设置;} public List Items {get;设置; } } protected override void OnInitialized() { Items = GenerateData(); base.OnInitialized(); } private List GenerateData() { List collection = new List() { new PanelBarItem() { Text = "Item 1", Items = new List() { new PanelBarItem() { Text = "Item 1.1" }, new PanelBarItem() { Text = "Item 1.2", Disabled = true, Items = new List() { new PanelBarItem() { Text = "Item 1.2.1" }, new PanelBarItem() { Text = "Item 1.2.2" } } } } }, new PanelBarItem() { Text = "Item 2", Items = new List() { new PanelBarItem() { Text = "Item 2.1", Items = new List() { new PanelBarItem() { Text = "Item 2.1.1" } } }, new PanelBarItem() { Text = "Item 2.2", Url = "https://google.com" } } }, new PanelBarItem() { Text = "Item 3" } }; return collection; } }

数据绑定

要显示任何项，Blazor PanelBar需要一个数据源，您可以通过数据财产。PanelBar允许您以平面数据和层次结构的方式显示项目。阅读更多关于Blazor PanelBar数据绑定…

面板栏项的元素

面板栏中的每个项由头而且内容．下图说明了这个概念。

的头包含相应数据项(模型)的Text。的内容表示层次结构中没有子项的项。

模板

PanelBar允许自定义它的项目元素。使用头模板而且内容模板来覆盖默认呈现。一个ContentTemplate像子项目一样显示。它只呈现给没有子元素的项目。

导航

可以使用PanelBar在应用程序的不同页面之间导航。阅读更多关于Blazor PanelBar导航…

图标

为了说明每个项目的用途，Blazor面板栏允许您添加图像、图标类或字体图标。阅读更多关于Blazor面板栏图标…

事件

Blazor PanelBar生成您可以处理以响应用户操作的事件。阅读更多关于Blazor PanelBar事件…

PanelBar参数

下表列出了PanelBar参数，这些参数与本页上的其他特性无关。检查PanelBar API参考以获取属性、方法和事件的完整列表。

PanelBar参考和方法

要执行PanelBar方法，请通过获取对组件实例的引用@ref．

PanelBar是一个通用组件。它的类型取决于它的模型的类型和它的类型价值．如果你不能提供价值或数据最初，你需要这样做将相应的类型设置为TItem而且TValue参数．

下表列出了PanelBar方法。也可查阅PanelBar API．

 @code{ private TelerikPanelBar PanelBarRef; }

下一个步骤

• 绑定PanelBar PanelBar到数据
• 使用面板栏在页面之间导航

另请参阅

• 数据绑定面板栏
• 现场演示:PanelBar
• API参考