Search results

Getting Started

This section briefly explains step-by-step process to create a Splitter component in your Blazor client-side application. You can refer Getting Started with Syncfusion Blazor for Client-Side in Visual Studio 2019 Preview page for the introduction and configuring the common specifications.

Importing Syncfusion Blazor component in the application

  • Install Syncfusion.EJ2.Blazor NuGet package to the application by using the NuGet Package Manager. Please ensure to check the Include prerelease option.
  • You can add the client-side resources through CDN or local npm package in the <head> element of the ~/wwwroot/index.html page.
<head>
    <environment include="Development">
        <link href="https://cdn.syncfusion.com/ej2/17.3.29/material.css" rel="stylesheet" />
        <script src="https://cdn.syncfusion.com/ej2/17.3.29/dist/ej2.min.js"></script>
     </environment>
</head>

Initialize the Blazor Splitter component

Initialize the Essential JS 2 Splitter component in any web page (razor) in the Pages folder. For example, the Splitter component is added in the ~/Pages/Index.razor page.

The following code explains how to initialize a simple horizontal Splitter in the Razor page.

@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.Layouts

<div id="pane-heading">Horizontal Splitter</div>
<EjsSplitter Height="240px" Width="100%">
    <SplitterPanes>
        <SplitterPane>
            <ContentTemplate>
                <div> Left Pane </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane>
            <ContentTemplate>
                <div> Middle Pane</div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane>
            <ContentTemplate>
                <div> Right Pane</div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</EjsSplitter>

Run the application

After successful compilation of your application, run the application.

The output will be as follows.

splitter Sample

See Also