Search results

Types

The Sidebar component’s expand behaviour can be modified based on the purpose of use.

Expanding types of Sidebar

The Sidebar can be set to initialize based on four different types that are consistent with the main component as explained below.

Item Description
Over Sidebar floats over the main content area.
Push Sidebar pushes the main content area to appear side-by-side, and shrinks the main content within the screen width.
Slide Sidebar translates the x and y positions of main content area based on the Sidebar width. The main content area will not be adjusted within the screen width.
Auto Sidebar with Over type in mobile resolution, and Push type in other higher resolutions.

Auto is the default expand mode.

In the following sample, the types of Sidebar are demonstrated.

tagHelper
types.cs
<ejs-sidebar id="default-sidebar" type="Push" target=".maincontent">
        <e-content-template>
            <div class="title"> Sidebar content</div>
            <div class="sub-title">
                Click the button to close the Sidebar.
            </div>
            <div class="center-align">
                <ejs-button id="close" content="Close Sidebar"></ejs-button>
            </div>
        </e-content-template>
    </ejs-sidebar>
    <div id="head">
        <ejs-button id="toggle" content="Open" isToggle="true" cssClass="e-info" iconCss="e-icons burg-icon"></ejs-button>
    </div>
    <div class="maincontent" style="height:335px;border:1px solid gray">
        <div class="content">
            <div class="title">Main content</div>
            <div class="sub-title">
                <div class="radiobutton">
                    <ejs-radiobutton id="over" checked="true" label="Over" name="state" change="positionChange"></ejs-radiobutton>
                </div>
                <div class="radiobutton">
                    <ejs-radiobutton id="push" label="Push" name="state" change="positionChange"></ejs-radiobutton>
                </div>
                <div class="radiobutton">
                    <ejs-radiobutton id="slide" label="Slide" name="state" change="positionChange"></ejs-radiobutton>
                </div>
                <div class="radiobutton">
                    <ejs-radiobutton id="auto" label="Auto" name="state" change="positionChange"></ejs-radiobutton>
                </div>
            </div>
        </div>
    </div>

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {

        document.getElementById('toggle').onclick = function () {
            var defaultSidebar = document.getElementById("default-sidebar").ej2_instances[0];
            var togglebtn = document.getElementById("toggle").ej2_instances[0];
            if (document.getElementById('toggle').classList.contains('e-active')) {
                togglebtn.content = 'Close';
                defaultSidebar.show();
            } else {
                togglebtn.content = 'Open';
                defaultSidebar.hide();
            }
        }
        // Close the sidebar
        document.getElementById('close').onclick = function () {
            var defaultSidebar = document.getElementById("default-sidebar").ej2_instances[0];
            var togglebtn = document.getElementById("toggle").ej2_instances[0];
            defaultSidebar.hide();
            document.getElementById('toggle').classList.remove('e-active');
            togglebtn.content = 'Open'
        }

    });

    function positionChange(args) {
        var defaultSidebar = document.getElementById("default-sidebar").ej2_instances[0];
        if (args.event.target.id == "over") {
            defaultSidebar.type = "Over"
        } else if (args.event.target.id == "push") {
            defaultSidebar.type = "Push"
        }
        else if (args.event.target.id == "slide") {
            defaultSidebar.type = "Slide"
        }
        else {
            defaultSidebar.type = "Auto"
        }    }
</script>
<style>
    .header {
        width: 100%;
        height: 40px;
        font-size: 20px;
        line-height: 40px;
        font-weight: 500;
        background: #eee;
        display: inline-block;
    }

    .center-align {
        text-align: center;
        padding: 20px;
    }

    .burg-icon:before {
        content: '\e7f6';
        font-size: 16px;
    }

    .title {
        text-align: center;
        font-size: 20px;
        padding: 15px;
    }

    #head {
        border: 1px solid #424242;
        border-bottom-color: transparent;
        background: #00897B;
    }

    #toggle, #toggle:hover, #toggle:focus { /* csslint allow: adjoining-classes*/
        background: #00695C;
        box-shadow: none;
        border-radius: 0;
        height: 39px;
        width: 100px;
    }

    #close, #close:hover, #close:active, #close:focus { /* csslint allow: adjoining-classes*/
        background: #fafafa;
        color: black
    }

    .sub-title {
        text-align: center;
        font-size: 16px;
        padding: 10px;
        display: flex;
        justify-content: center;
    }

    .radiobutton {
        display: inline-block;
        padding: 10px;
    }

    .center {
        text-align: center;
        display: none;
        font-size: 13px;
        font-weight: 400;
        margin-top: 20px;
    }


    .sub-title {
        text-align: center;
        font-size: 16px;
        padding: 10px;
    }

    #wrapper {
        display: block;
    }

    .sb-content-tab .center { /* csslint allow: adjoining-classes*/
        display: block;
    }

    .sb-content-tab #wrapper { /* csslint allow: adjoining-classes*/
        display: none;
    }

    .right {
        float: right;
    }

    body {
        margin: 0;
    }

    #default-sidebar {
        background-color: #26A69A;
        color: #ffffff;
    }

    .close-btn:hover {
        color: #fafafa;
    }

    .content-section { /* csslint allow: adjoining-classes */
        padding: 30px 10px 10px 20px;
    }

    .book .ej2-sample-frame { /* csslint allow: adjoining-classes */
        padding: 0;
    }
</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers
{
    public partial class SidebarController : Controller
    {
        public IActionResult types()
        {
            return View();
        }
    }
}