ASP.NET Core Blazor [Preview]
Search results

Getting Started

This section briefly explains about how to include a simple Sidebar in your Blazor application. You can refer Blazor Getting Started documentation page for introduction part of the system requirements and configure the common specifications.

Adding component package to the application

Open ~/_Imports.razor file and import the Syncfusion.EJ2.RazorComponents.Navigations packages.

    @using Syncfusion.EJ2.RazorComponents
    @using Syncfusion.EJ2.RazorComponents.Navigations

Adding component to the Application

Now, add the Syncfusion Essential JS 2 components in any web page (.cshtml) in the Pages folder. For example, the Sidebar component is added in the ~/Pages/Index.cshtml page.

@page "/sidebar"

@using Syncfusion.EJ2.RazorComponents.Navigations

<div class="control-section">
    <EjsSidebar ID="default-sidebar">
        <ChildContent>
            <div class="title-header">
                <div style="display:inline-block"> Sidebar </div>
            </div>
            <div class="sub-title">
                Place your primary content here.
            </div>
        </ChildContent>
    </EjsSidebar>
    <!-- end of sidebar element -->
    <!-- main content declaration -->
    <div>
        <div class="title default">Main content</div>
        <div class="sub-title">
            Place your primary content here.
        </div>
    </div>
</div>

<style>

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

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

    body {
        padding-top: 0px;
        padding-bottom: 0px;
    }

    #default-sidebar {
        background-color: rgb(25, 118, 210);
        color: #ffffff;
    }

    .title-header {
        text-align: center;
        font-size: 18px;
        padding: 15px;
    }
</style>

Run the application

After successful compilation of your application, simply press F5 to run the application.

output

Enable backdrop

Enabling the showBackdrop in the Sidebar component will prevent the main content from user interactions. Here, the DOM elements will not get changed. It only closes the main content by covering with a black backdrop overlay and focuses the Sidebar in the screen.

The following example shows a Sidebar component with enabled backdrop.

@page "/backdrop"

@using Syncfusion.EJ2.RazorComponents.Navigations
@using Syncfusion.EJ2.RazorComponents.Buttons

<div class="control-section">
    <EjsSidebar ID="default-sidebar" ref="sidebarObj" ShowBackdrop="@showBackdrop">
        <ChildContent>
            <div class="title"> Sidebar content</div>
            <div class="sub-title">
                Click the button to close the Sidebar.
            </div>
            <div class="center-align">
                <EjsButton ID="close" onclick="@close" CssClass="e-btn close-btn">Close Sidebar</EjsButton>
            </div>
        </ChildContent>
    </EjsSidebar>
    <!-- end of sidebar element -->
    <!-- main content declaration -->
    <div>
        <div class="title">Main content</div>
        <div class="sub-title"> Click the button to open/close the Sidebar.</div>
        <div style="padding:20px" class="center-align">
            <EjsButton ID="toggle" onclick="@toggle" IsToggle="true" CssClass="e-btn e-info">Toggle Sidebar</EjsButton>
        </div>
    </div>
</div>

@functions{
    EjsSidebar sidebarObj;
    public bool showBackdrop = true;
    public void close()
    {
        this.sidebarObj.Hide();
    }
    public void toggle()
    {
        this.sidebarObj.Toggle();
    }
}

<style>
    /* Button element styles */
    #close, #close:hover, #close:active, #close:focus { /* csslint allow: adjoining-classes*/
        background: #fafafa;
        color: black
    }

    /* sample level styles */
    .title {
        text-align: center;
        font-size: 20px;
        padding: 15px;
    }

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

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

    body {
        margin: 0;
    }

    /* Sidebar element styles */
    #default-sidebar {
        background-color: rgb(25, 118, 210);
        color: #ffffff;
    }
</style>

Output be like the below.

backdrop sample