航海抽屉

抽屉是另一种菜单它通常用于在应用程序中的页面之间导航-它可以通过它生成所需的链接UrlField当数据绑定．

使用Drawer在页面之间导航:

• 将抽屉添加到MainLayot.razor你的应用程序。
• 把@Body标记。< DrawerContent >抽屉的标签。
• 提供一组模型来描述您希望用户导航到的页面。

中可以找到演示此功能的可运行示例抽屉作为侧导航示例项目。

@*这是展示概念的一个非常基本的布局。你可能想要添加一个页眉，页脚，折叠/展开按钮，并添加所需的高度到布局和抽屉*@ @inherits LayoutComponentBase    @Body    @code{List NavigablePages {get;设置;} = new List {new DrawerItem {Text = "Home"， Url = "/"， Icon = FontIcon。Home}，新的DrawerItem{分隔符= true}，新的DrawerItem{文本= "计数器"，Url = "计数器"，图标= FontIcon。PlusOutline}，新的DrawerItem{文本= "FetchData"， Url = "FetchData"，图标= FontIcon。Grid}};公共类DrawerItem{公共字符串文本{获取;设置;}公共字符串Url{获取;设置;公开的FontIcon? Icon { get; set; } public bool Separator { get; set; } } }

笔记

• 的UrlField有一个默认值(Url)，即使你没有明确地定义它，如果出现在模型中，它也会被使用。

• 组件使用NavigationManager中的值执行导航UrlField．

  • 如果您有一个添加锚的模板，或者使用一个单击事件来导航用户自己，这可能会导致双重导航和错误，特别是如果您的模型有一个名为Url．为了避免此类问题，要么让Telerik组件进行导航，并删除同样进行导航的特定于应用程序的代码，要么删除URL设置(重命名模型字段，或者将UrlField到一个不存在的字段)。

• 你可能也会觉得有用本文介绍在页面加载时选择Drawer项．

另请参阅

• 抽屉的概述
• 数据绑定
• 抽屉里的模板