抽屉里的模板

抽屉可以使用模板进行定制。本文解释了组件可用的布局模板。

• ItemTemplate
• 模板

ItemTemplate

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

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

@*这个例子展示了如何控制抽屉菜单中项目的呈现*@     @if(扩展){
 
 
}   @SelectedItem?描述   @code {public TelerikDrawer DrawerRef {get;设置;} public DrawerItem SelectedItem {get;设置; } public bool Expanded { get; set; } = true; public IEnumerable Data { get; set; } = new List { new DrawerItem {Text = "Shopping Cart", Icon = FontIcon.Cart, Description = "Items in shopping cart"}, new DrawerItem {Text = "Notifications", Icon = FontIcon.Bell, Description = "My profile notifications"}, new DrawerItem {Text = "Calendar", Icon = FontIcon.Calendar, Description = "My events"}, new DrawerItem {Text = "Settings", Icon = FontIcon.Gear, Description = "My profile settings"}, }; public class DrawerItem { public string Text { get; set; } public FontIcon? Icon { get; set; } public string Description { get; set; } } }

模板

的<模板>允许您控制Drawer的整个呈现，以便您可以添加额外的内容和应用程序逻辑。这个模板接收一个上下文论点是IEnumerable < TItem >-这是数据组件的集合。

在使用此模板时，抽屉的所有内置特性都被禁用，并且应该由应用程序实现，例如项目选择以及渲染、导航到不同页面等。页面导航可以完成<一>，< NavLink >，NavigationManager等等......

抽屉会像往常一样展开和折叠，但内容必须完全由应用程序控制。

确保< DrawerContent >标签在<模板>- - -< DrawerContent >负责在抽屉之外呈现应用程序，而<模板>仅控制组件的呈现。在< DrawerContent >标签你可以放置@Body当您使用抽屉作为侧边栏导航时。

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

使用<模板>而且< ItemTemplate >一起是不可能的-模板从抽屉中删除任何内置渲染。

使用模板剥夺了drawer的功能，因为它不再控制自己的呈现。例如，项目的外观、集中状态、键盘导航、页面导航和单击不再由Drawer组件控制，而需要由应用程序模板实现。

这个例子展示了如何为抽屉创建页眉和页脚，并手动选择一个项目。*@  <模板> @*标题*@ 
  @if (DrawerExpanded) {
 My Custom Navigation 
} else {
 Nav 
} 
 @*自定义项目渲染和项目选择*@ 
 
 @if (SelectedItem != null && DrawerExpanded) {
 
 
@SelectedItem. "文本< /强> < / p > < p > @SelectedItem。Description
 
 
 } @foreach (var item in Data) { @* Use onclick to handle manual item selection *@ 
  @if (DrawerExpanded) { 
 
@item.Text
 
 } 
 } 
 
 @* the footer *@ @if (DrawerExpanded) { 
  

 Log Out 
 }   
Content for @SelectedItem?.Text - @SelectedItem?.Description
   @code { public TelerikDrawer DrawerRef { get; set; } public DrawerItem SelectedItem { get; set; } public bool DrawerExpanded { get; set; } = true; public IEnumerable Data { get; set; } = new List { new DrawerItem {Text = "Shopping Cart", Icon = FontIcon.Cart, Description = "Items in shopping cart"}, new DrawerItem {Text = "Settings", Icon = FontIcon.Gear, Description = "My profile settings"}, new DrawerItem {Text = "Notifications", Icon = FontIcon.ExclamationCircle, Description = "My profile notifications"}, new DrawerItem {Text = "Calendar", Icon = FontIcon.Calendar, Description = "My events"}, }; public string GetSelectedItemClass(DrawerItem item) { if (SelectedItem == null) return string.Empty; return SelectedItem.Text.ToLowerInvariant().Equals(item.Text.ToLowerInvariant()) ? "text-info" : ""; } public class DrawerItem { public string Text { get; set; } public FontIcon? Icon { get; set; } public string Description { get; set; } } }