ASP.NET Core Drawer Overview
The Drawer is part of Telerik UI for ASP.NET Core, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
The Telerik UI Drawer TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI Drawer widget.
The Drawer is a dismissible panel used for navigation in responsive web applications or changing the content of a section on a specific page.
Initializing the Drawer
The following example demonstrates how to define the Drawer.
@(Html.Kendo().Drawer()
.Name("drawer")
.Template(@"<ul>
<li data-role='drawer-item'>First Item</li>
<li data-role='drawer-separator'></li>
<li data-role='drawer-item'>Second Item</li>
<li data-role='drawer-item' class='k-selected'>Third Item</li>
</ul>")
.Mode("push")
.Position("left")
.SwipeToOpen(true)
.Content(@"<div style='height: 200px;'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error accusantium odit, optio nulla maiores quo neque fugit debitis dignissimos incidunt maxime?</div>")
)
<kendo-drawer name="drawer"
template-id="template"
mode="push"
position="left"
swipe-to-open="true">
<content>
<div style='height: 200px;'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error accusantium odit, optio nulla maiores quo neque fugit debitis dignissimos incidunt maxime?</div>
</content>
</kendo-drawer>
<script id="template" type="text/x-kendo-template">
<ul>
<li data-role='drawer-item'>First Item</li>
<li data-role='drawer-separator'></li>
<li data-role='drawer-item'>Second Item</li>
<li data-role='drawer-item' class='k-selected'>Third Item</li>
</ul>
Functionality and Features
- Display modes—The component provides three display modes that allow you to control how the Drawer is displayed on the screen.
-
Interaction modes—The Drawer supports the
overlayandpushinteraction modes, and you can determine if it will be rendered on left or right side. - Templates—With the built-in item templates, you control how the Drawer items are rendered.
- Hierarchy—The Drawer allows you to display hierarchically organized items.
- Events—The Drawer allows you to handle its events and implement custom functionality.
- Expanded—The Drawer can be expanded by default using this setting.
Next Steps
- Getting Started with the Drawer
Basic Usage of the Drawer HtmlHelper for ASP.NET Core (Demo)
- Drawer in Razor Pages