New to Telerik UI for ASP.NET Core? Download free 30-day trial

ASP.NET Core Responsive Panel TagHelper

Loading Demo...

EXAMPLE
VIEW SOURCE
Change Theme
default
Default Theme

Main

Main Dark

Nordic

Ocean Blue

Ocean Blue A11Y

Purple

Turquoise
Bootstrap Theme

Main

Bootstrap 3

Bootstrap 3 Dark

Main Dark

Nordic

Turquoise

Turquoise Dark

Urban

Vintage
Material Theme

Main

Arctic

Lime Dark

Main Dark

Nova
Classic Theme

Main

Green

Green Dark

Lavender

Lavender Dark

Main Dark

Metro

Metro Dark

Moonlight

Opal

Opal Dark

Silver

Silver Dark

Uniform
Fluent Theme

Main
Launch Theme Builder

                    tag_helper.cshtml
                
                    Tag_HelperController.cs

Resize the page to see how the responsive panel hides content.

News

Jan 22, 2014 Stanford Speaker Series Looks at the Rising Tide of Eastern European High Tech Firms with Telerik CEO Vassil Terziev

Dec 10, 2013 Telerik Test Studio Now Offers Cross-Browser Test Recording and Subscription-Based Pricing for 1M-Strong Developer Community

Nov 22, 2013 Telerik AD is Named "Best Employer in Bulgaria" for Sixth Consecutive Year

Nov 20, 2013 Telerik Embraces the Responsive Web with Latest Kendo UI Improvements

Blogs

Upgrading OpenAccess ORM to Telerik Data Access

Friday, February 14, 2014 by Data Access Team

OpenAccess ORM was recently renamed to Telerik Data Access and re-branded. Find out what are the changes you can expect when upgrading to the latest official release.

Design, then Develop Experiences

Friday, February 14, 2014 by Telerik Services

Here at Telerik, our goal is to help you develop experiences. We've got a long history of providing tools to help developers deliver great value for their customers. But maybe sometimes you need a little help figuring out just how to make your customers happy. That's where the user experience (UX) designers at Telerik Services come in.

What Carl Sagan Taught Me About Software

Thursday, February 13, 2014 by Kendo UI

Software ecosystems are vital to a developer's success. It's hard to place a value on the benefit derived from being able to lean on other's experience, as well as easily find and digest content that's relevant to your project. Ecosystems don't just sprout up overnight though. It takes the right timing, the perfect conditions and lots of love and cultivation. Trying to actively create a new ecosystem around a product or platform is a lot like terraforming. Carl Sagan knows a thing or two about that.

#example { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow: hidden; } .dash-head { max-width: 970px; height: 80px; background-color: #222; position: relative; } .dash-head .k-rpanel-toggle { position: absolute; width: 40px; height: 40px; top: 20px; left: 20px; } .panel-wrap { max-width: 968px; background-color: #f5f5f5; border: 1px solid #e5e5e5; position: relative; } #slidebar { margin: 0; padding: 20px 0 20px 20px; vertical-align: top; } @media (max-width: 1000px) { #slidebar { background: #fff; padding: 20px; border-left: 1px solid #e5e5e5; /* show sidebar in container, demo only*/ position: absolute; top: 0; bottom: 0; } #slidebar.k-rpanel-expanded { box-shadow: 0 0 10px rgba(0,0,0,.3); } } #main-content { overflow: hidden; margin: 0; padding: 20px; min-height: 580px; vertical-align: top; } /* WIDGETS */ .widget { margin: 0 0 20px; padding: 0; background-color: #ffffff; border: 1px solid #e7e7e7; border-radius: 3px; } .widget div { padding: 10px; min-height: 50px; } .widget h3 { font-size: 12px; padding: 8px 10px; text-transform: uppercase; border-bottom: 1px solid #e7e7e7; } .widget h3 span { float: right; } .widget h3 span:hover { cursor: pointer; background-color: #e7e7e7; border-radius: 20px; } /* PROFILE */ .profile-photo { width: 80px; height: 80px; margin: 10px auto; border-radius: 100px; border: 1px solid #e7e7e7; background: url(/aspnet-core/shared/web/Customers/ISLAT.jpg) no-repeat 50% 50%; } #profile div { text-align: center; } #profile h4 { width: auto; margin: 0 0 5px; font-size: 1.2em; color: #1f97f7; } #profile p { margin: 0 0 10px; } /* BLOGS & NEWS */ #blogs div, #news div { padding: 0 20px 20px; } #teammates h4, #blogs h4, #news h4 { width: auto; margin: 20px 0 2px; font-size: 1.4em; color: #1f97f7; font-weight: normal; } .blog-info { margin: 0 0 10px; font-size: .9em; color: #787878; } #slidebar #blogs h4 { font-size: 1em; } #slidebar #blogs p { display: none; } #slidebar #blogs .blog-info { display: block; } #main-content #news h4 { font-size: 1.2em; line-height: 1.4em; } #main-content #news h4 span { display: block; float: left; width: 100px; color: #000; padding-right: 10px; } #slidebar #news h4 { font-size: 1em; } #slidebar #news h4 span { display: block; margin-bottom: 3px; color: #000; } /* TEAMMATES */ .team-mate:after { content: "."; display: block; height: 0; line-height: 0; clear: both; visibility: hidden; } #teammates .team-mate h4 { font-size: 1.4em; font-weight: normal; margin-top: 12px; } .team-mate p { margin: 0; } .team-mate img { float: left; margin: 0 15px 0 0; border: 1px solid #e7e7e7; border-radius: 60px; }

Description

The Telerik UI for ASP.NET Core ResponsivePanel allows you to customize the way page content is displayed depending on the screen size.

The ResponsivePanel component can be implemented in an application in either its HTML or Tag Helper mode depending on your development preferences and background.

This demo shows how to use the Tag Helper approach which is utilizing HTML-like syntax to implement the ResponsivePanel.

Additional Apps

This Responsive Panel example is part of unique collection of hundreds of ASP.NET Core demos, with which you can see all Telerik ASP.NET Core components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for ASP.NET Core or ThemeBuilder.

ASP.NET Core Responsive Panel TagHelper

Description

Additional Apps

Support & Learning Resources

Additional Resources