ResponsivePanel TagHelper Overview
The Telerik UI ResponsivePanel TagHelper for ASP.NET Core is a server-side wrapper for the Kendo UI ResponsivePanel widget.
The ResponsivePanel allows you to hide part of a page content on small screens.
Initializing the ResponsivePanel
The following example demonstrates how to define the ResponsivePanel by using the ResponsivePanel TagHelper.
<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>
Basic Configuration
The configuration options of the ResponsivePanel TagHelper are passed as attributes of the tag.
@(Html.Kendo().ResponsivePanel()
.Name("sidebar")
.Breakpoint(1000)
.Orientation("left")
.Content(@<text>
<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>
</text>)
)
<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>