Blazor抽屉概述
的Blazor抽屉组件交互式侧板是用来做什么的导航在响应式web应用程序中。它可以始终可见，也可以展开和折叠。抽屉允许切换页面上不同部分的内容。您可以自定义其模板，扩展模式，最小化的行为同时也对事件。
的一部分《Blazor》的teleerik UI一个专业级的UI库，拥有100多个本地组件，用于构建现代和功能丰富的应用程序。要想尝试一下，注册一个30天的免费试用。
创建Blazor抽屉
添加
TelerikDrawer标记到Razor文件。填充它
数据属性，包含项目集合(IEnumerable < T >)，供用户查看。设置
设置SelectedItem参数为aT对象。它支持单向和双向绑定。控件中放置当前页面的内容
< DrawerContent >标签。设置
@ref参数获取对组件实例的引用。使用此实例来切换抽屉。在内容中添加一个按钮来切换抽屉。
抽屉的基本配置。
@*这个例子展示了抽屉的基本配置，以及如何通过单击按钮展开或折叠抽屉。*@ 切换抽屉 lorem ipsum @code { Telerik.Blazor.Components.TelerikDrawer DrawerRef { get; set; } IEnumerable Data { get; set; } = new List { new DrawerItem { Text = "Counter", Icon = FontIcon.Plus }, new DrawerItem { Text = "FetchData", Icon = FontIcon.GridLayout }, }; public class DrawerItem { public string Text { get; set; } public FontIcon? Icon { get; set; } } } 数据绑定
Blazor Drawer需要一个数据源，以便它可以向用户显示项目。方法提供数据源数据财产。阅读更多关于Blazor Drawer数据绑定的信息。
导航
Drawer通常用于列出应用程序中的页面、视图或部分，以便用户可以在它们之间导航。要在抽屉中做到这一点，有两个选项:
模式
Blazor Drawer提供推和覆盖扩展模式。它们决定抽屉项是将其他内容推到一边，还是暂时覆盖它。阅读更多关于Blazor Drawer模式的信息。
迷你视图
默认情况下，折叠抽屉时不可见。为了给用户留下一个小提示，Drawer提供了一个Mini View，这样用户只需一个操作就可以导航，而不需要展开Drawer项。阅读更多关于Blazor抽屉迷你视图。
选择
Drawer组件有一个选项，可以预先选择所需的项，然后使用突出显示的项来加载/生成内容，或者表示当前页面。阅读更多关于Blazor抽屉的选择。
模板
Blazor Drawer允许完全控制项目的呈现和布局。组件有一个ItemTemplate和模板。阅读更多关于Blazor Drawer模板的信息。
抽屉里的图标
为了说明每个Drawer项的目的，Blazor Drawer可以选择添加图像、图标类或字体图标。阅读更多关于Blazor抽屉图标的信息。
刷新数据
当数据项发生变化时，Drawer可以刷新其接口。阅读更多关于Blazor Drawer数据刷新的信息。
事件
Blazor抽屉触发选择和展开事件。处理这些事件以响应用户操作。阅读更多关于Blazor Drawer事件的信息。
抽屉里的参数
Blazor Drawer提供各种参数来配置组件。也可以查看抽屉公共API。
| 参数 | 类型和默认值 | 描述 |
|---|---|---|
类 |
字符串 |
控件呈现自定义CSS类< div class = " k-drawer-container”>元素。 |
扩大 |
保龄球 |
指定抽屉是展开还是折叠。如果此参数用于展开或折叠组件，则动画将不可用。要使用动画，你必须使用抽屉方法。但是，可以使用该值在抽屉中实现自定义布局模板或者在你自己的布局中。 |
模式 |
DrawerMode枚举（ 覆盖） |
控制“抽屉”是否在推或覆盖模式。阅读更多关于支持的模式。 |
MiniMode |
保龄球 |
控制是否有迷你视图当抽屉倒塌时。 |
位置 |
DrawerPosition枚举（ 开始） |
确定在哪一边DrawerContent项目列表将呈现。 |
宽度 |
字符串（ 240 px） |
抽屉展开时的宽度。 |
抽屉参考及方法
Drawer方法可以通过它的引用来访问。的值扩大参数。
| 方法 | 描述 |
|---|---|
ExpandAsync |
展开抽屉。 |
CollapseAsync |
折叠抽屉。 |
ToggleAsync |
根据当前状态展开或折叠抽屉。 |
获取对抽屉的引用并使用其方法
抽屉是一个通用组件，它的引用类型取决于它所绑定的模型的类型。*@ 切换抽屉 lorem ipsum @code { Telerik.Blazor.Components.TelerikDrawer DrawerRef { get; set; } IEnumerable Data { get; set; } = new List { new DrawerItem { Text = "Counter", Icon = FontIcon.Plus }, new DrawerItem { Text = "FetchData", Icon = FontIcon.GridLayout }, }; public class DrawerItem { public string Text { get; set; } public FontIcon? Icon { get; set; } } }