Merge pull request #6848 from syncfusion-content/984382-splitter

Updated the UG document for Splitter Component.

Author: VengateshManiraj

blazor/splitter/accessibility.md

@@ -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.
 
@@ -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:
 
@@ -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)

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
 

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
 

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)
 

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<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" %}
@@ -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.
 
@@ -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 %}
@@ -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" %}
@@ -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" %}
@@ -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:
 
@@ -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
 
@@ -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.