ASP.NET Core Responsive Panel 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 specified 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 a 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 Responsive Panel component accepts any HTML that is passed in the
Contentoption. For more advanced scenarios, pass custom HTML of your choice.
CSP Compliance
The Responsive Panel relies on inline styles to create dynamic media queries. If strict CSP mode is enabled for the applicaiton you can use the .Nonce configuration option and specify a nonce attribute that will be set to the inline style injected in the head tag, containing the dynamic media query styles.
Next Steps
- Getting Started with the Responsive Panel
Basic Usage of the Responsive Panel HtmlHelper for ASP.NET Core (Demo)
Basic Usage of the Responsive Panel TagHelper for ASP.NET Core (Demo)