This section briefly explains how to include a Splitter component in your Blazor Server-side application. You can refer to our Getting Started with Syncfusion Blazor for Server-Side in Visual Studio 2019 page for the introduction and configuring the common specifications.
<head>
<environment include="Development">
....
....
<link href="_content/Syncfusion.Blazor/styles/fabric.css" rel="stylesheet" />
<!---CDN--->
@*<link href="https://cdn.syncfusion.com/blazor/18.4.42/styles/fabric.css" rel="stylesheet" />*@
</environment>
</head>
For Internet Explorer 11 kindly refer the polyfills. Refer the documentation for more information.
<head>
<environment include="Development">
<link href="_content/Syncfusion.Blazor/styles/fabric.css" rel="stylesheet" />
<script src="https://github.com/Daddoon/Blazor.Polyfill/releases/download/3.0.1/blazor.polyfill.min.js"></script>
</environment>
</head>
Open ~/_Imports.razor file and import the Syncfusion.Blazor.Layouts package.
@using Syncfusion.Blazor.Layouts
Open the Startup.cs file and add services required by Syncfusion components using services.AddSyncfusionBlazor() method. Add this method in the ConfigureServices function as follows.
using Syncfusion.Blazor;
namespace BlazorApplication
{
public class Startup
{
....
....
public void ConfigureServices(IServiceCollection services)
{
....
....
services.AddSyncfusionBlazor();
}
}
}
To initialize the Splitter component, add the below code to your Index.razor view page which is present under ~/Pages folder.
The following code explains how to initialize a simple horizontal Splitter in the Razor page.
@using Syncfusion.Blazor.Layouts
<div>Horizontal Splitter</div>
<SfSplitter 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>
</SfSplitter>
After successful compilation of your application, run the application.
The output will be as follows.