ASP.NET Core ResponsivePanel Overview
The ResponsivePanel 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 Responsive Panel TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI Responsive Panel widget.
The Responsive Panel allows you to hide part of a page content on small screens. The Component collapses a content element when a breakpoint is reached. The collapsed content is then expanded by a button with the k-rpanel-toggle class. To set the placement of the expandable content, use the orientation option.
Initializing the Responsive Panel
The following example demonstrates how to define the Responsive Panel.
@(Html.Kendo().ResponsivePanel()
.Name("sidebar")
.Breakpoint(1000)
.Content("<p>This content will collapse if the width is less than 1000px</p>")
)
<kendo-responsivepanel name="sidebar" breakpoint="1000">
<p>This content will collapse if the width is less than 1000px</p>
</kendo-responsivepanel>
Basic Configuration
The following example demonstrates the basic configuration of the Responsive Panel.
<div class="dash-head">
<!-- toggle button for responsive panel, hidden on large screens -->
<button class="k-rpanel-toggle"><span class="k-icon k-i-menu"></span></button>
</div>
<!-- responsive panel, collapsed on small screens -->
@(Html.Kendo().ResponsivePanel()
.Name("sidebar")
.Breakpoint(1000)
.Orientation(ResponsivePanelOrientation.Left)
.Content("<div> <div id='profile' class='widget'> <h3>Profile</h3> <div> <div class='profile-photo'>" +
" </div> <h4>Lynda Schleifer</h4> <p>Sales Associate</p> </div> </div> <div id='teammates' class='widget'> <h3>Teammates</h3>" +
" <div> <div class='team-mate'> <img src='./shared/web/panelbar/andrew.jpg' alt='Andrew Fuller'> <h4>Andrew Fuller</h4> <p>Team Lead</p> </div> " +
" <div class='team-mate'> <img src='./shared/web/panelbar/nancy.jpg' alt='Nancy Leverling'> <h4>Nancy Leverling</h4> <p>Sales Associate</p></div>" +
" <div class='team-mate'> <img src='./shared/web/panelbar/robert.jpg' alt='Robert King'> <h4>Robert King</h4> <p>Business System Analyst</p> </div> </div> </div>")
)
<div class="dash-head">
<!-- toggle button for responsive panel, hidden on large screens -->
<button class="k-rpanel-toggle"><span class="k-icon k-i-menu"></span></button>
</div>
<!-- responsive panel, collapsed on small screens -->
<kendo-responsivepanel name="slidebar" breakpoint="1000" orientation="left">
<div id="profile" class="widget">
<h3>Profile</h3>
<div>
<div class="profile-photo"></div>
<h4>Lynda Schleifer</h4>
<p>Sales Associate</p>
</div>
</div>
<div id="teammates" class="widget">
<h3>Teammates</h3>
<div>
<div class="team-mate">
<img src="@Url.Content("~/content/web/panelbar/andrew.jpg")" alt="Andrew Fuller">
<h4>Andrew Fuller</h4>
<p>Team Lead</p>
</div>
<div class="team-mate">
<img src="@Url.Content("~/content/web/panelbar/nancy.jpg")" alt="Nancy Leverling">
<h4>Nancy Leverling</h4>
<p>Sales Associate</p>
</div>
<div class="team-mate">
<img src="@Url.Content("~/content/web/panelbar/robert.jpg")" alt="Robert King">
<h4>Robert King</h4>
<p>Business System Analyst</p>
</div>
</div>
</div>
</kendo-responsivepanel>
The Telerik UI ResponsivePanel accepts any HTML that is passed in the
Contentoption. For more advanced scenarios, pass custom HTML of your choice.