ResponsivePanel Overview

Telerik UI for ASP.NET Core Ninja image

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="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 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>")
    )
        <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 Content option. For more advanced scenarios, pass custom HTML of your choice.

See Also

In this article