的Blazor抽屉组件是一个交互式侧板导航在响应式web应用程序中。它可以始终可见，也可以扩展和折叠。抽屉允许切换页面上不同部分的内容。您可以自定义其模板，扩展模式，最小化的行为同时也对事件．
抽屉组件是Blazor的Telerik UI，一个专业级的UI库，包含100个本地组件，用于构建现代和功能丰富的应用程序。想要试用它，可以注册一个30天的免费试用期。
添加TelerikDrawer标记到Razor文件。
填充它数据属性中的项集合(IEnumerable < T >)以供使用者查阅。
设置设置SelectedItem的参数。T对象。它支持单向和双向绑定。
将当前页面的内容放在< DrawerContent >标签。
设置@ref参数获取对组件实例的引用。使用此实例切换Drawer。
在内容中添加一个按钮来切换抽屉。
抽屉的基本配置。
@*这个例子展示了抽屉的基本配置，以及如何通过单击按钮展开或折叠抽屉。*@ 所选项目:@ selecteditem ?Text Blazor Drawer需要一个数据源，以便它可以向用户显示项目。要提供数据源，请使用数据财产。阅读有关Blazor抽屉数据绑定的更多信息．
抽屉通常用于列出应用程序中的页面、视图或部分，以便用户可以在它们之间导航。要做到这一点，有两个选项抽屉:
Blazor抽屉提供推而且覆盖扩张模式。它们决定抽屉项目是否将其他内容推到一边，或暂时覆盖它。阅读更多关于Blazor抽屉模式．
默认情况下，折叠抽屉是不可见的。为了给用户留下一个小提示，Drawer提供了一个Mini View，这样用户只需一个操作就可以导航，而不需要展开Drawer项。阅读更多关于Blazor抽屉迷你视图．
Drawer组件有一个选项，可以预先选择所需的项，然后使用高亮显示的项来加载/生成内容，或者表示当前页面。阅读更多关于Blazor抽屉选择．
Blazor抽屉允许完全控制项目渲染和布局。组件有一个ItemTemplate而且模板．阅读更多关于Blazor抽屉模板．
为了说明每个抽屉项目的目的，Blazor抽屉有添加图像、图标类或字体图标的选项。阅读更多关于Blazor抽屉图标．
当数据项发生变化时，Drawer可以刷新其界面。阅读更多关于Blazor抽屉数据刷新．
Blazor Drawer触发选择和展开事件。处理这些事件以响应用户操作。阅读更多关于Blazor抽屉事件．
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 = "plus"}, new DrawerItem { Text = "FetchData", Icon = "grid-layout"}, }; public class DrawerItem { public string Text { get; set; } public string Icon { get; set; } } }