Skip to content

SyncfusionExamples/getting-started-with-blazor-splitter-component

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Getting Started with the Blazor Splitter Component

Repository Description
This repository contains a quick‑start Blazor WebAssembly sample that demonstrates how to integrate and configure the Syncfusion Blazor Splitter component to create flexible, resizable layouts.

The Blazor Splitter is a layout user interface (UI) component that provides resizable, expandable, collapsible, and nestable panes. This project helps developers get started with the Syncfusion Splitter component in a Blazor WebAssembly application. It includes sample code to resize, collapse, and expand panes, as well as render nested split panes.

Project Overview

The purpose of this project is to help developers understand the basic usage and configuration of the Syncfusion Blazor Splitter component. It demonstrates how to structure page layouts using multiple panes that users can resize or collapse based on their requirements.

Features

  • Resizable, expandable, and collapsible panes
  • Support for nested split panes
  • Flexible layout management for complex UI scenarios
  • User‑controlled pane sizing

Prerequisites

  • Visual Studio 2022

Installation and Running the Project

  1. Check out or clone this project to a local directory.
  2. Open the solution file using Visual Studio 2022.
  3. Restore NuGet packages by rebuilding the solution.
  4. Build and run the project to view the Blazor Splitter component in action.

Usage

Run the application and interact with the splitter panes to resize, collapse, and expand sections dynamically. Nested panes can also be explored to understand complex layout arrangements.

Troubleshooting

  • Ensure the correct .NET SDK and Visual Studio version are installed.
  • Restore NuGet packages if build errors occur.
  • Rebuild the solution if layout changes are not reflected.
  • Check browser developer tools for runtime or rendering errors.

Support

For detailed API references, configuration options, and advanced usage examples, refer to the Syncfusion Blazor documentation and community resources listed above.

Features and Benefits

Sizing to content

The size of a pane can be specified by users in either pixels or a percentage, with a minimum and maximum range of values, to allow for the sizing of its child component or content.

State management

The Splitter state can be saved and loaded thanks to state management. As opposed to having its properties declared declaratively, the Splitter will render based on a state that the user provides.

Resizable panes

The Blazor Splitter component comes with built-in support for expanding or contracting panes. Individual windows can be resized by users with validation for minimum and maximum sizes.

Related links

Learn More about Blazor Splitter

Download Free Trial

Pricing

Documentation

View Demos

Community Forums

Suggest a feature or report a bug

Online example

Video Tutorials

Knowledge base

About Syncfusion Blazor Components

The Syncfusion's Blazor components library offers over 70 UI components to work with Blazor server-side and client-side (Blazor WebAssembly) projects seamlessly. In addition to Splitter, we provide popular Blazor Components such as DataGrid,Charts, Scheduler, Diagram, Word Processor, and more.

About Syncfusion

Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 28,000 customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.

Today, we provide 1700+ components and frameworks for web (Blazor, ASP.NET Core, ASP.NET MVC, ASP.NET WebForms, JavaScript, Angular, React, Vue, and Flutter), mobile (Xamarin, Flutter, UWP, JavaScript, and .NET MAUI), and desktop development (WinForms, WPF, WinUI, Flutter and UWP, and .NET MAUI). We provide ready-to-deploy enterprise software for dashboards, reports, data integration, and big data processing. Many customers have saved millions in licensing fees by deploying our software.


sales@syncfusion.com | www.syncfusion.com| Toll Free: 1-888-9 DOTNET

About

A quick-start project that helps you get up and running with the Syncfusion Splitter component in a Blazor WebAssembly application. This project contains the code to resize, collapse, and expand panes. It also contains code to render nested panes.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors