From bf0b4f1a8be64ba51bb40cbf75f6e65f02bc6160 Mon Sep 17 00:00:00 2001 From: praveensf4999 Date: Wed, 8 Oct 2025 19:19:41 +0530 Subject: [PATCH 1/2] 984382: Updated the UG document for Splitter Component. --- blazor/splitter/accessibility.md | 12 +++---- blazor/splitter/different-layouts.md | 10 +++--- blazor/splitter/events.md | 14 ++++----- blazor/splitter/expand-and-collapse.md | 18 ++++++----- blazor/splitter/getting-started-webapp.md | 32 +++++++++---------- blazor/splitter/getting-started.md | 32 ++++++++++--------- blazor/splitter/images/pane-visibility.png | Bin 0 -> 9434 bytes blazor/splitter/images/rotate-grip.png | Bin 0 -> 23389 bytes blazor/splitter/pane-content.md | 22 +++++++------ blazor/splitter/pane-settings.md | 13 +++++--- blazor/splitter/pane-sizing.md | 18 +++++++---- blazor/splitter/resize-icon-template.md | 4 ++- blazor/splitter/resizing.md | 28 ++++++++++------- blazor/splitter/split-panes.md | 35 ++++++++++++++------- blazor/splitter/state-management.md | 2 +- blazor/splitter/style.md | 28 ++++++++--------- blazor/splitter/two-way-binding.md | 8 +++-- 17 files changed, 159 insertions(+), 117 deletions(-) create mode 100644 blazor/splitter/images/pane-visibility.png create mode 100644 blazor/splitter/images/rotate-grip.png diff --git a/blazor/splitter/accessibility.md b/blazor/splitter/accessibility.md index e773c0f31d..c622ce2876 100644 --- a/blazor/splitter/accessibility.md +++ b/blazor/splitter/accessibility.md @@ -1,7 +1,7 @@ --- 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 and more. platform: Blazor control: Splitter documentation: ug @@ -9,7 +9,7 @@ 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. @@ -37,7 +37,7 @@ The accessibility compliance for the Blazor Splitter component is outlined below
No - The component does not meet the requirement.
-## Keyboard interaction +## Keyboard Interaction The following key shortcuts can be used to access the Blazor Splitter without interruptions: @@ -51,12 +51,12 @@ The following key shortcuts can be used to access the Blazor Splitter without in | ↓ | ↓ | Helps in moving the active `Vertical` orientated splitter bar to its `Down` side. | | Enter | Enter | 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® components](../common/accessibility) \ No newline at end of file diff --git a/blazor/splitter/different-layouts.md b/blazor/splitter/different-layouts.md index 254fd3c5a3..ac3c81639f 100644 --- a/blazor/splitter/different-layouts.md +++ b/blazor/splitter/different-layouts.md @@ -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. @@ -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`. @@ -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 diff --git a/blazor/splitter/events.md b/blazor/splitter/events.md index 287f849c18..e4ce37bab4 100644 --- a/blazor/splitter/events.md +++ b/blazor/splitter/events.md @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 diff --git a/blazor/splitter/expand-and-collapse.md b/blazor/splitter/expand-and-collapse.md index 0696b52f07..a3d4b9bcd4 100644 --- a/blazor/splitter/expand-and-collapse.md +++ b/blazor/splitter/expand-and-collapse.md @@ -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 @@ -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 @@ -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 @@ -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) diff --git a/blazor/splitter/getting-started-webapp.md b/blazor/splitter/getting-started-webapp.md index a4882cfe63..813b90d8bd 100644 --- a/blazor/splitter/getting-started-webapp.md +++ b/blazor/splitter/getting-started-webapp.md @@ -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 %} @@ -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® 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® 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® 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® 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® 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" %} @@ -52,11 +52,11 @@ N> Syncfusion® 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® 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® 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. @@ -74,10 +74,10 @@ N> For more information on creating a **Blazor Web App** with various interactiv ## Install Syncfusion® 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® Blazor components NuGet packages within the client project. +If `WebAssembly` or `Auto` render modes are utilized in the Blazor Web App, install Syncfusion® Blazor component NuGet packages within the client project. * Press Ctrl+` 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 %} @@ -118,7 +118,7 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Layouts` namespace. Now, register the Syncfusion® 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® Blazor service in both **~/Program.cs** files of your Blazor Web App. +If the **Interactive Render Mode** is `WebAssembly` or `Auto`, register the Syncfusion® 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" %} @@ -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® Blazor Service only in that **~/Program.cs** file. +If the **Interactive Render Mode** is set to `Server`, Register the Syncfusion® Blazor Service only in the server-side **~/Program.cs** file. {% tabs %} {% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} @@ -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 `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: @@ -189,7 +189,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -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® Blazor Splitter component @@ -260,4 +260,4 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i * [Getting Started with Syncfusion® 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. \ No newline at end of file +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. \ No newline at end of file diff --git a/blazor/splitter/getting-started.md b/blazor/splitter/getting-started.md index db6831816d..46c45240c2 100644 --- a/blazor/splitter/getting-started.md +++ b/blazor/splitter/getting-started.md @@ -11,7 +11,7 @@ documentation: ug # Getting Started with Blazor Splitter Component -This section briefly explains about how to include [Blazor Splitter](https://www.syncfusion.com/blazor-components/blazor-splitter) component in your Blazor WebAssembly App using Visual Studio 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 WebAssembly App using Visual Studio and Visual Studio Code. To get start quickly with Blazor Splitter component, refer to the video below or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Splitter) sample. @@ -26,13 +26,13 @@ To get start quickly with Blazor Splitter component, refer to the video below or * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor App in Visual Studio +## Create a New Blazor WebAssembly App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® 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/). Alternatively, you can utilize the following package manager command to achieve the same. +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/). Alternatively, the Package Manager Console can be used to install the required NuGet package {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -53,11 +53,11 @@ N> Syncfusion® Blazor components are availa * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor App in Visual Studio Code +## Create a New Blazor WebAssembly App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application using the following command in the terminal (Ctrl+`): {% tabs %} @@ -73,7 +73,7 @@ cd BlazorApp ## Install Syncfusion® Blazor Layouts and Themes NuGet in the App * Press Ctrl+` 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 %} @@ -129,20 +129,24 @@ await builder.Build().RunAsync(); {% 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 and script references in the `` section of the **~/index.html** file. +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 references within the `` section and script references in `` section of the **~/index.html** file. ```html .... - +.... + + .... + + ``` -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 Blazor Splitter component +## Add Blazor Splitter Component Add the Syncfusion® Blazor Splitter component in the **~/Pages/Index.razor** file. @@ -195,4 +199,4 @@ Add the Syncfusion® Blazor Splitter compone * [Getting Started with Syncfusion® Blazor for server-side in .NET Core 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=bootstrap5) 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=bootstrap5) for a demonstration on rendering and configuring the Splitter. \ No newline at end of file diff --git a/blazor/splitter/images/pane-visibility.png b/blazor/splitter/images/pane-visibility.png new file mode 100644 index 0000000000000000000000000000000000000000..24966f937f6c2df74fd365e0acad78bbd2ccb687 GIT binary patch literal 9434 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 literal 0 HcmV?d00001 diff --git a/blazor/splitter/images/rotate-grip.png b/blazor/splitter/images/rotate-grip.png new file mode 100644 index 0000000000000000000000000000000000000000..55d78f512c2df0ca5cd64797fd47df8e34a6ed96 GIT binary patch literal 23389 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 literal 0 HcmV?d00001 diff --git a/blazor/splitter/pane-content.md b/blazor/splitter/pane-content.md index 1988f2a899..614c0a6fed 100644 --- a/blazor/splitter/pane-content.md +++ b/blazor/splitter/pane-content.md @@ -9,7 +9,7 @@ documentation: ug # Pane Content in Blazor Splitter Component -This section explains how to provide plain text content or HTML markup to splitter pane. +This section explains how to provide plain text content or HTML markup to a splitter pane, and how to integrate other Blazor components within its panes. ## HTML Markup @@ -62,17 +62,19 @@ Splitter is a layout based container component. The pane contents can be rendere ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBeWNZbpQOSxZWI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Blazor Splitter Content with HTML Markup](./images/blazor-splitter-content-html-markup.png) -## Blazor UI components +## Blazor UI Components -Any Blazor components can be rendered along with their native and control events within splitter as pane content. +Any Blazor component, along with its native and control events, can be rendered as pane content within the splitter. -Refer [Listview within splitter](https://blazor.syncfusion.com/demos/splitter/details-view?theme=bootstrap5) example. +Refer to the [Listview within splitter](https://blazor.syncfusion.com/demos/splitter/details-view?theme=bootstrap5) example. -## Plain content +## Plain Content -The plain text can be added as a pane contents using either inner HTML or `Content` API +Plain text can be added as pane content using either inner HTML or the `Content` API. ```cshtml @@ -114,21 +116,23 @@ The plain text can be added as a pane contents using either inner HTML or `Conte ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBIsjXlTPXMSRGV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Blazor Splitter with Plain Content](./images/blazor-splitter-plain-content.png) -## Integrate other Blazor component inside the pane of the Splitter +## Integrate Other Blazor Components Inside Splitter Panes Another Blazor component can be rendered inside the split pane using following solutions: ### Solution 1 -The Blazor component can be directly rendered as content to split pane. +The Blazor component can be directly rendered as content within the split pane. ### Solution 2 The Blazor component can be integrated by rendering it as a separate page. (Each page is considered as a separate component in Blazor.) -The following example demonstrates the above two solutions. The first pane renders Grid as a direct child component, and the second pane renders Tab component from a separate page(SplitterContent.razor). +The following example demonstrates both solutions. The first pane renders a Grid as a direct child component, and the second pane renders a Tab component from a separate page(SplitterContent.razor). Index.razor diff --git a/blazor/splitter/pane-settings.md b/blazor/splitter/pane-settings.md index a7156e7210..9215b75ae5 100644 --- a/blazor/splitter/pane-settings.md +++ b/blazor/splitter/pane-settings.md @@ -9,13 +9,13 @@ documentation: ug # Pane Settings in the Blazor Splitter Component -This section explains the pane settings behavior. +This section explains the behavior and configuration of individual pane settings within the Syncfusion Blazor Splitter component. -## Pane visibility +## Pane Visibility -You can show or hide the Splitter panes using the `Visible` property based on the application’s demand like initial load or dynamic cases. The `Visible` property is enabled by default in the Blazor splitter. +Splitter panes can be shown or hidden using the `Visible` property, based on application demands such as initial load or dynamic changes. The `Visible` property is set to `true` by default for all panes. -In the following code example, the `Visible` property binds to the second `SplitterPane` to show/hide the pane on CheckBox state change. +In the following code example, the `Visible` property is bound to the second `SplitterPane` to dynamically show/hide the pane when a button is toggled. ```cshtml @@ -52,4 +52,7 @@ In the following code example, the `Visible` property binds to the second `Split } } -``` \ No newline at end of file +``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLSMZjFfbqlbQPf?appbar=false&editor=false&result=true&errorlist=false&theme=tailwind" %} + +![Blazor Splitter](./images/pane-visibility.png) \ No newline at end of file diff --git a/blazor/splitter/pane-sizing.md b/blazor/splitter/pane-sizing.md index 9c8888d35b..8faac14283 100644 --- a/blazor/splitter/pane-sizing.md +++ b/blazor/splitter/pane-sizing.md @@ -9,11 +9,11 @@ documentation: ug # Pane Sizing in Blazor Splitter Component -Splitter allows to provide pane sizes either in `Pixel` or `Percentage` formats. +The Splitter allows providing pane sizes in either `Pixel` or `Percentage` formats. -## Auto size panes +## Auto Size Panes -The splitter's panes are adjusted automatically during resizing if the size is not specified externally to panes, because the panes are designed based on flex layout by default. When you add/remove or show/hide the panes, the panes are auto aligned within its container. +Splitter panes adjust automatically during resizing if an explicit size is not specified, as panes are designed with a flex layout by default. When panes are added, removed, shown, or hidden, they auto-align within the container. ```cshtml @@ -62,11 +62,13 @@ using Syncfusion.Blazor.Layouts ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLoMttlJlnRCjnx?appbar=false&editor=false&result=true&errorlist=false&theme=tailwind" %} + ![Blazor Splitter with Auto sizing Panes](./images/auto-sizing-panes.png) -## Fixed pane +## Fixed Panes -The split panes can be rendered with fixed size in both `Horizontal` and `Vertical` mode. Even if a fixed size is provided to all the panes, the last pane is considered as a flexible pane. +Split panes can be rendered with a fixed size in both `Horizontal` and `Vertical` modes. Even if a fixed size is provided to all panes, the last pane is considered a flexible pane and will absorb any remaining space or overflow. ```cshtml @@ -102,9 +104,11 @@ The split panes can be rendered with fixed size in both `Horizontal` and `Vertic ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/htryWjZlfFclnAqF?appbar=false&editor=false&result=true&errorlist=false&theme=tailwind" %} + ![Blazor Splitter with Fixed Pane Size in Pixel](./images/blazor-splitter-fixed-pane-size-in-pixel.png) -Splitter pane Size in `Percentage`. +### Splitter Pane Size in Percentage ```cshtml @@ -132,4 +136,6 @@ Splitter pane Size in `Percentage`. ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLSCDtPTllceCgf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Blazor Splitter with Fixed Pane Size in Percentage](./images/blazor-splitter-fixed-pane-size-in-percentage.png) \ No newline at end of file diff --git a/blazor/splitter/resize-icon-template.md b/blazor/splitter/resize-icon-template.md index c373219214..a2938706de 100644 --- a/blazor/splitter/resize-icon-template.md +++ b/blazor/splitter/resize-icon-template.md @@ -9,7 +9,7 @@ documentation: ug # Resize Icon Template -The Splitter allows to customize the resize icon of the separator using the template, where any image or other templates can be rendered as resize icon. +The Splitter supports customizing the resize icon in the separator using a template. Any markup, such as bars, images, or icons, can be rendered as the resize handle. ```cshtml @@ -43,4 +43,6 @@ The Splitter allows to customize the resize icon of the separator using the temp ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZhIWttvfkXWBDnr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Blazor Splitter with Resize Icon Template](./images/blazor-splitter-resize-icon-template.png) \ No newline at end of file diff --git a/blazor/splitter/resizing.md b/blazor/splitter/resizing.md index f6c4537b3f..92b018704a 100644 --- a/blazor/splitter/resizing.md +++ b/blazor/splitter/resizing.md @@ -1,23 +1,23 @@ --- layout: post -title: Resize in Blazor Splitter Component | Syncfusion +title: Resizing in Blazor Splitter Component | Syncfusion description: Checkout and learn here all about how to resize in Syncfusion Blazor Splitter component and much more details. platform: Blazor control: Splitter documentation: ug --- -# Resize in Blazor Splitter Component +# Resizing in Blazor Splitter Component -By default, resizing will be enabled for split panes. Resizing gripper element will be added to the separator to make the resize easy. +By default, resizing is enabled for split panes. A resizing gripper element is added to the separator to facilitate easy resizing. -N> Horizontal splitter allows to resize in horizontal directions. Vertical splitter allows to resize in vertical directions. +N> Horizontal splitters allow resizing in horizontal directions. Vertical splitters allow resizing in vertical directions. -While resizing, previous and next panes will adjust its dimensions automatically. +When resizing, both the previous and next panes automatically adjust their dimensions. -## Min and Max validation +## Minimum and Maximum Size Validation -Splitter allows to set the minimum and maximum sizes for each pane. Resizing will not be occurred over the minimum and maximum values. +The Splitter allows setting minimum (`Min`) and maximum (`Max`) sizes for each pane. Resizing will not extend beyond these defined minimum and maximum values. ```cshtml @@ -66,9 +66,11 @@ Splitter allows to set the minimum and maximum sizes for each pane. Resizing wil ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVIsDZPzEDwehcS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Changing Blazor Splitter Size](./images/blazor-splitter-size.png) -## Prevent resizing +## Prevent Resizing The resizing for the pane can be disabled by setting `false` to the `Resizable` API within `SplitterPane`. @@ -121,13 +123,15 @@ N> Splitter resizing will be enabled only when the target of the adjacent pane's ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLeitNbfaWrhMeV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Prevent Resizing in Blazor Splitter](./images/blazor-splitter-prevent-resizing.png) -## Refresh content on resizing +## Refresh Content on Resizing While resizing the panes, the pane contents can be refreshed by using either `OnResizeStart`, `Resizing` or `OnResizeStop`. -## Customize the resize grip and cursor +## Customize the Resize Grip and Cursor The resize gripper icon and cursor can be customized in css level. @@ -188,7 +192,9 @@ The resize gripper icon and cursor can be customized in css level. ``` -![Blazor Splitter with Custom Gripper](./images/blazor-splitter-custom-gripper.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLSCXjlTOiFjwUr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor Splitter with Custom Gripper](./images/rotate-grip.png) ## See Also diff --git a/blazor/splitter/split-panes.md b/blazor/splitter/split-panes.md index fc44e9554f..0ca6efc72d 100644 --- a/blazor/splitter/split-panes.md +++ b/blazor/splitter/split-panes.md @@ -9,11 +9,11 @@ documentation: ug # Split Panes in Blazor Splitter Component -This section explains split-panes behaviors. +This section explains the configuration and behavior of split panes within the Syncfusion Blazor Splitter component. -## Horizontal layout +## Horizontal Layout -By default, splitter will be rendered in horizontal orientation. Splitter container will be split as panes in horizontal flow direction with vertical separator. +By default, the Splitter renders in a horizontal orientation. The splitter container splits into panes flowing horizontally, with vertical separators between them. ```cshtml @@ -62,11 +62,13 @@ By default, splitter will be rendered in horizontal orientation. Splitter contai ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLSCDtPpuqUaXQp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Blazor Splitter with Horizontal Orientation](./images/blazor-splitter-horizontal-orientation.png) -## Vertical layout +## Vertical Layout -By setting value to `Orientation` API as `Vertical`, splitter will be rendered in vertical orientation. Splitter container will be split as panes in vertical flow direction with horizontal separator. +By setting the `Orientation` property to `Orientation.Vertical`, the Splitter renders in a vertical orientation. The splitter container then splits into panes flowing vertically, with horizontal separators between them. ```cshtml @@ -115,6 +117,8 @@ By setting value to `Orientation` API as `Vertical`, splitter will be rendered i ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LthoiZNFzYUPHZGg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Blazor Splitter with Vertical Orientation](./images/blazor-splitter-vertical-orientation.png) N> Multiple panes can also be rendered in splitter with both `Horizontal/Vertical` orientations. @@ -172,13 +176,15 @@ N> For horizontal orientation, it will be considered as separator width. For ver ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBIWjXPTETUitEK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Blazor Splitter with Separator](./images/blazor-splitter-separator.png) ## Nested Splitter Splitter provides support to render the nested pane to achieve the complex layouts. The same `SplitterPane` tag can be used for splitter pane and nested splitter. -N> Also the nested splitter can be rendered using direct child of the splitter pane. For this, nested splitter should have `100%` width and height to match with the parent pane dimensions. +N> When rendering a nested splitter as a direct child of a splitter pane, the nested splitter should have `100%` width and height to match the parent pane's dimensions. ```cshtml @@ -248,15 +254,17 @@ N> Also the nested splitter can be rendered using direct child of the splitter p ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVIMtZlzOfchmHU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Blazor Nested Splitter](./images/blazor-nested-splitter.png) -## Add or remove pane +## Add or Remove Panes -The panes can be added programmatically but it will be complex. For this, use the `AddPane/RemovePane` methods to add and remove the panes dynamically in the splitter. +For dynamic addition and removal of panes, use the `AddPaneAsync` and `RemovePaneAsync` methods to manage panes gracefully in the splitter. -### Add pane +### Add Pane -The panes can be added dynamically in the splitter by passing `PaneProperties` along with index to the `AddPane` method. +Panes can be added dynamically to the splitter by passing `SplitterPane` properties along with an index to the `AddPaneAsync` method. ```cshtml @@ -314,10 +322,11 @@ The panes can be added dynamically in the splitter by passing `PaneProperties` a } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhSWtDbJEehtKiQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -### Remove pane +### Remove Pane -The split panes can be removed dynamically by passing the pane index to `RemovePane` method. +Split panes can be removed dynamically by passing the pane index to the `RemovePaneAsync` method. ```cshtml @@ -378,6 +387,8 @@ The split panes can be removed dynamically by passing the pane index to `RemoveP ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjBysttlfYewBMuS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ## See Also * [Resizable split panes](./resizing) diff --git a/blazor/splitter/state-management.md b/blazor/splitter/state-management.md index 2d4f2746ea..ad3952d336 100644 --- a/blazor/splitter/state-management.md +++ b/blazor/splitter/state-management.md @@ -20,7 +20,7 @@ Min | Max | Size | -## Enabling persistence in Splitter +## Enabling Persistence in Splitter State persistence allows the Splitter to retain the current splitter panes state in the browser local storage for state maintenance. This action is handled through the `EnablePersistence` property which is set to false by default. When it is set to true, some properties of the `SplitterPane` will be retained even after refreshing the page. diff --git a/blazor/splitter/style.md b/blazor/splitter/style.md index ff778ac6ab..0651a1a25e 100644 --- a/blazor/splitter/style.md +++ b/blazor/splitter/style.md @@ -1,21 +1,21 @@ --- layout: post -title: Style and appearance in Blazor Splitter Component | Syncfusion +title: Style and Appearance in Blazor Splitter Component | Syncfusion description: Checkout and learn here all about style and appearance in Syncfusion Blazor Splitter component and more. platform: Blazor control: Splitter documentation: ug --- -# Style and appearance in Blazor Splitter Component +# Style and Appearance in Blazor Splitter Component The following content provides the exact CSS structure that can be used to modify the control's appearance based on the user preference. -## Customizing the split bar +## Customizing the Split Bar Use the following CSS to customize the split bar properties. -### Horizontal split bar +### Horizontal Split Bar ```css /* default split bar color */ @@ -30,7 +30,7 @@ Use the following CSS to customize the split bar properties. } ``` -### Vertical split bar +### Vertical Split Bar ```css /* default split bar color */ @@ -45,11 +45,11 @@ Use the following CSS to customize the split bar properties. } ``` -## Customizing the split bar resize handle +## Customizing the Split Bar Resize Handle Use the following CSS to customize the split bar resize handle. -### Horizontal split bar resize handle +### Horizontal Split Bar Resize Handle ```css /* default split bar resize handle color */ @@ -63,7 +63,7 @@ Use the following CSS to customize the split bar resize handle. } ``` -### Vertical split bar resize handle +### Vertical Split Bar Resize Handle ```css /* default split bar resize handle color */ @@ -77,11 +77,11 @@ Use the following CSS to customize the split bar resize handle. } ``` -## Customizing the split bar arrows +## Customizing the Split Bar Arrows Use the following CSS to customize the split bar arrows. -### Horizontal split bar resize arrows +### Horizontal Split Bar Resize Arrows ```css /* split bar arrows */ @@ -95,7 +95,7 @@ Use the following CSS to customize the split bar arrows. } ``` -### Vertical split bar resize arrows +### Vertical Split Bar Resize Arrows ```css /* split bar arrows */ @@ -109,11 +109,11 @@ Use the following CSS to customize the split bar arrows. } ``` -## To hide the resize handle in Splitter +## Hide the Resize Handle in Splitter Use the following CSS to hide the resize handler in the split bar -### Hide the horizontal split bar resize arrow +### Hide the Horizontal Split Bar Resize Arrow ```CSS .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler { @@ -121,7 +121,7 @@ Use the following CSS to hide the resize handler in the split bar } ``` -### Hide the vertical split bar resize arrow +### Hide the Vertical Split Bar Resize Arrow ```CSS .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler { diff --git a/blazor/splitter/two-way-binding.md b/blazor/splitter/two-way-binding.md index 4f127e4cf0..09934b83e9 100644 --- a/blazor/splitter/two-way-binding.md +++ b/blazor/splitter/two-way-binding.md @@ -1,15 +1,15 @@ --- layout: post -title: Two way Binding in Blazor Splitter Component | Syncfusion +title: Two-way Binding in Blazor Splitter Component | Syncfusion description: Checkout and learn here all about two way binding in Syncfusion Blazor Splitter component and much more. platform: Blazor control: Splitter documentation: ug --- -# Two way Binding in Blazor Splitter Component +# Two-way Binding in Blazor Splitter Component -The splitter `SplitterPane` `Collapsed` property supports the two-way binding and it can be achieved by using the `bind-Collapsed` attribute. If the component value has been changed, it will affect all the places where we bind the variable for the bind-value attribute. +The `Collapsed` property of a `SplitterPane` supports two-way binding, which can be achieved using the `@bind-Collapsed` attribute. When the value of the bound variable changes, it automatically updates all elements linked via that variable. In the following example, if either the value is changed in checkbox or splitter first pane collapsed state, it will reflect in both the checkbox and splitter pane. @@ -48,6 +48,8 @@ In the following example, if either the value is changed in checkbox or splitter ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDresDZFpYnFGNWd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Data Binding in Blazor Splitter](./images/blazor-splitter-data-binding.png) ## See Also From f22c559bca3b21fedee0eccedb10ac49d5f278b1 Mon Sep 17 00:00:00 2001 From: praveensf4999 Date: Thu, 9 Oct 2025 10:08:06 +0530 Subject: [PATCH 2/2] 984382: Updated the UG document for the Splitter component --- blazor/splitter/accessibility.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/splitter/accessibility.md b/blazor/splitter/accessibility.md index c622ce2876..391d4bd736 100644 --- a/blazor/splitter/accessibility.md +++ b/blazor/splitter/accessibility.md @@ -1,7 +1,7 @@ --- layout: post title: Accessibility in Blazor Splitter Component | Syncfusion -description: Learn about the accessibility compliance of the Syncfusion Blazor Splitter component and more. +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