Skip to content

Updated the UG document for Splitter Component. #6848

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: development
Choose a base branch
from
Open

Updated the UG document for Splitter Component. #6848

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bf0b4f1
984382: Updated the UG document for Splitter Component.
praveensf4999 Oct 8, 2025
f22c559
984382: Updated the UG document for the Splitter component
praveensf4999 Oct 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions blazor/splitter/accessibility.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
---
layout: post
title: Keyboard Shortcuts | Syncfusion
description: Checkout and learn here all about keyboard shortcuts in Syncfusion Blazor Splitter component and more.
title: Accessibility in Blazor Splitter Component | Syncfusion
description: Learn about the accessibility compliance of the Syncfusion Blazor Splitter component, covering WCAG 2.2, Section 508, and keyboard navigation.
platform: Blazor
control: Splitter
documentation: ug
---

# Accessibility in Blazor Splitter Component

The [Blazor Splitter](https://www.syncfusion.com/blazor-components/blazor-splitter) component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
The [Blazor Splitter](https://www.syncfusion.com/blazor-components/blazor-splitter) component adheres to accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and commonly used [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) for evaluating accessibility.

The accessibility compliance for the Blazor Splitter component is outlined below.

Expand Down Expand Up @@ -37,7 +37,7 @@ The accessibility compliance for the Blazor Splitter component is outlined below
<div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="No"> - The component does not meet the requirement.</div>


## Keyboard interaction
## Keyboard Interaction

The following key shortcuts can be used to access the Blazor Splitter without interruptions:

Expand All @@ -51,12 +51,12 @@ The following key shortcuts can be used to access the Blazor Splitter without in
| <kbd>↓</kbd> | <kbd>↓</kbd> | Helps in moving the active `Vertical` orientated splitter bar to its `Down` side. |
| <kbd>Enter</kbd> | <kbd>Enter</kbd> | Helps to toggle between `Expand` and `Collapse` actions of the splitter bar when it is active. |

## Ensuring accessibility
## Ensuring Accessibility

The Blazor Splitter component's accessibility levels are ensured through an [axe-core](https://www.npmjs.com/package/axe-core) software tool during automated testing.

The accessibility compliance of the Splitter component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/splitter) in a new window to evaluate the accessibility of the Splitter component with accessibility tools.

## See also
## See Also

* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> components](../common/accessibility)
10 changes: 5 additions & 5 deletions blazor/splitter/different-layouts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ documentation: ug

# Different Layouts in Blazor Splitter Component

By using splitter control, the different layouts can be created with multiple and nested panes.
Different layouts can be created using the splitter control with multiple and nested panes.

## Code editor style layout
## Code Editor Style Layout

**Step 1**: Create the element with two child to render the outer splitter.

Expand Down Expand Up @@ -160,9 +160,9 @@ By using splitter control, the different layouts can be created with multiple an

```

Once the above configurations has been completed, the output will be displayed like [this](https://blazor.syncfusion.com/demos/splitter/code-editor-layout?theme=bootstrap5)
After completing the above configurations, the output is displayed as shown [here](https://blazor.syncfusion.com/demos/splitter/code-editor-layout?theme=bootstrap5).

## Outlook style layout
## Outlook Style Layout

**Step 1**: Create the element with three panes and place the elements within the pane to render `Treeview`, `Listview` and `RichTextEditor`.

Expand Down Expand Up @@ -422,7 +422,7 @@ Once the above configurations has been completed, the output will be displayed l

```

Once the above configurations has been completed, the output will be displayed like [this](https://blazor.syncfusion.com/demos/splitter/outlook?theme=bootstrap5).
After completing the above configurations, the output is displayed as shown [here](https://blazor.syncfusion.com/demos/splitter/outlook?theme=bootstrap5).

## See Also

Expand Down
14 changes: 7 additions & 7 deletions blazor/splitter/events.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ This section explains the list of events of the splitter component which will be

## Created

`Created` event triggers after creating the splitter component with its panes.
The `Created` event triggers after the Splitter component and its panes are rendered.

```cshtml

Expand All @@ -34,7 +34,7 @@ This section explains the list of events of the splitter component which will be

## OnResizeStart

`OnResizeStart` event triggers when the split pane is started to resize.
The `OnResizeStart` event triggers when a split pane begins to resize.

```cshtml

Expand All @@ -55,7 +55,7 @@ This section explains the list of events of the splitter component which will be

## OnResizeStop

`OnResizeStop` event triggers when the resizing of split pane is stopped.
The `OnResizeStop` event triggers when a split pane finishes resizing.

```cshtml

Expand All @@ -76,7 +76,7 @@ This section explains the list of events of the splitter component which will be

## Resizing

`Resizing` event triggers when a split pane is being resized.
The `Resizing` event triggers while a split pane is actively being resized.

```cshtml

Expand Down Expand Up @@ -118,7 +118,7 @@ This section explains the list of events of the splitter component which will be

## OnExpand

`OnExpand` event triggers before the panes get expanded.
The `OnExpand` event triggers before a pane expands.

```cshtml

Expand All @@ -139,7 +139,7 @@ This section explains the list of events of the splitter component which will be

## Collapsed

`Collapsed` event triggers after the panes get collapsed.
The `Collapsed` event triggers after a pane has collapsed.

```cshtml

Expand All @@ -160,7 +160,7 @@ This section explains the list of events of the splitter component which will be

## Expanded

`Expanded` event triggers after the panes get expanded.
The `Expanded` event triggers after a pane has expanded.

```cshtml

Expand Down
18 changes: 11 additions & 7 deletions blazor/splitter/expand-and-collapse.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@ documentation: ug

# Expand and Collapse in Blazor Splitter Component

## Collapsible panes
## Collapsible Panes

The Splitter panes can be configured with built-in expand and collapse functionalities. By default, the collapsible behavior is disabled. Enable the `Collapsible` behavior in the SplitterPane property to show or hide the expand or collapse icons in the panes. The panes can be dynamically expanded and collapsed by the corresponding icons.
The Splitter panes include built-in expand and collapse functionalities. By default, this behavior is disabled. Enable the `Collapsible` property within the `SplitterPane` to display the expand or collapse icons. Panes can then be dynamically expanded and collapsed using these icons.

The following code shows how to enable collapsible behavior.
The following code demonstrates enabling collapsible behavior:

```cshtml

Expand Down Expand Up @@ -62,11 +62,13 @@ The following code shows how to enable collapsible behavior.

```

{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVIWjDbTGevpdop?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

![Expand and Collapse in Blazor Splitter](./images/blazor-splitter-expand-collapse.png)

## Programmatically control the expand and collapse action
## Programmatically Control Expand and Collapse Actions

The Splitter provides public method to control the expand and collapse behavior programmatically using the `Expand` and `Collapse` methods.
The Splitter component provides public methods (`ExpandAsync` and `CollapseAsync`) to control pane expansion and collapse programmatically.

```cshtml

Expand Down Expand Up @@ -138,12 +140,13 @@ The Splitter provides public method to control the expand and collapse behavior
}

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/hZhyWttbpwHeoMpA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

![Expand and Collapse in Blazor Splitter](./images/blazor-splitter-expand-collapse-dynamic.png)

## Specify initial state to panes
## Specify Initial State to Panes

Specific panes can be rendered with collapsed state on page load. Specify a Boolean value to the `Collapsed` property to control this behavior. The following code explains how to collapse panes on rendering (the second panes renders with collapsed state).
Specific panes can be rendered in a collapsed state upon page load. To control this behavior, set the `Collapsed` property to `true` for the desired `SplitterPane`. The following code demonstrates rendering the second pane in a collapsed state.

```cshtml

Expand Down Expand Up @@ -197,6 +200,7 @@ Specific panes can be rendered with collapsed state on page load. Specify a Bool
}

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBeWZZlpGczrUcO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

![Expand and Collapse in Blazor Splitter](./images/blazor-splitter-expand-collapse-initial.png)

Expand Down
32 changes: 16 additions & 16 deletions blazor/splitter/getting-started-webapp.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ documentation: ug

# Getting Started with Blazor Splitter in Blazor Web App

This section briefly explains about how to include [Blazor Splitter](https://www.syncfusion.com/blazor-components/blazor-splitter) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
This section explains how to integrate the Syncfusion [Blazor Splitter](https://www.syncfusion.com/blazor-components/blazor-splitter) component into a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.

{% tabcontents %}

Expand All @@ -19,19 +19,19 @@ This section briefly explains about how to include [Blazor Splitter](https://www

* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)

## Create a new Blazor Web App in Visual Studio
## Create a New Blazor Web App in Visual Studio

You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).

You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) while creating a Blazor Web Application.
Configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) when creating a Blazor Web Application.

## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Layouts and Themes NuGet in the App

To add **Blazor Splitter** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Layouts](https://www.nuget.org/packages/Syncfusion.Blazor.Layouts) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).

If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
If `WebAssembly or Auto` render modes are utilized in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages are installed within the client project.

Alternatively, you can utilize the following package manager command to achieve the same.
Alternatively, the Package Manager Console can be used to install the required NuGet package

{% tabs %}
{% highlight C# tabtitle="Package Manager" %}
Expand All @@ -52,11 +52,11 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa

* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)

## Create a new Blazor Web App in Visual Studio Code
## Create a New Blazor Web App in Visual Studio Code

You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).

You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.
Configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) when creating a Blazor Web Application.

For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.

Expand All @@ -74,10 +74,10 @@ N> For more information on creating a **Blazor Web App** with various interactiv

## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Layouts and Themes NuGet in the App

If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
If `WebAssembly` or `Auto` render modes are utilized in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages within the client project.

* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
* Ensure you’re in the project root directory where your `.csproj` file is located.
* Ensure the current directory is the project root where the `.csproj` file is located.
* Run the following command to install a [Syncfusion.Blazor.Layouts](https://www.nuget.org/packages/Syncfusion.Blazor.Layouts) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed.

{% tabs %}
Expand Down Expand Up @@ -118,7 +118,7 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Layouts` namespace.

Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.

If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both **~/Program.cs** files of your Blazor Web App.
If the **Interactive Render Mode** is `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both **Program.cs** files of the Blazor Web App (`server` and `client` projects).

{% tabs %}
{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
Expand Down Expand Up @@ -152,7 +152,7 @@ await builder.Build().RunAsync();
{% endhighlight %}
{% endtabs %}

If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service only in that **~/Program.cs** file.
If the **Interactive Render Mode** is set to `Server`, Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service only in the server-side **~/Program.cs** file.

{% tabs %}
{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
Expand All @@ -173,7 +173,7 @@ var app = builder.Build();
{% endhighlight %}
{% endtabs %}

## Add stylesheet and script resources
## Add Stylesheet and Script Resources

The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section and the script reference at the end of the `<body>` in the **~/Components/App.razor** file as shown below:

Expand All @@ -189,7 +189,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
</body>
```

N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in a Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in a Blazor application.

## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Splitter component

Expand Down Expand Up @@ -260,4 +260,4 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i

* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)

N> You can also explore our [Blazor Splitter example](https://blazor.syncfusion.com/demos/splitter/default-functionalities?theme=fluent) that shows you how to render and configure the Splitter.
N> Explore the [Blazor Splitter example](https://blazor.syncfusion.com/demos/splitter/default-functionalities?theme=fluent) for a demonstration on rendering and configuring the Splitter.
Loading