diff --git a/blazor/sidebar/accessibility.md b/blazor/sidebar/accessibility.md index ad31a28e67..6184cc7bac 100644 --- a/blazor/sidebar/accessibility.md +++ b/blazor/sidebar/accessibility.md @@ -9,7 +9,7 @@ documentation: ug # Accessibility in Blazor Sidebar Component -The [Blazor Sidebar](https://www.syncfusion.com/blazor-components/blazor-sidebar) 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 Sidebar](https://www.syncfusion.com/blazor-components/blazor-sidebar) 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 [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. The accessibility compliance for the Blazor Sidebar component is outlined below. @@ -37,24 +37,24 @@ The accessibility compliance for the Blazor Sidebar component is outlined below.
No - The component does not meet the requirement.
-## WAI-ARIA attributes +## WAI-ARIA Attributes -The Blazor Sidebar component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) patterns to meet accessibility standards. By default, the Sidebar utilizes the [complementary](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/complementary_role) role, with the option to modify the ARIA role based on provided attributes to the root element, depending on the specific use case. +The Blazor Sidebar component adheres to [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) patterns to meet accessibility standards. By default, the Sidebar utilizes the [complementary](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/complementary_role) role, with the option to modify the ARIA role based on provided attributes to the root element, depending on the specific use case. If there are multiple complementary landmark roles or aside elements in a document, it is important to provide a label for each landmark using the `aria-label` attribute. Alternatively, if the aside has a descriptive title, it can be referenced using the `aria-labelledby` attribute. This label will help assistive technology users quickly understand the purpose of each landmark. For optimal accessibility, it is recommended to incorporate a trigger component that is navigable via a keyboard, such as a button. If this is not feasible, inclusion of the `tabIndex` attribute becomes necessary. Furthermore, explicit handling of the `aria-expanded` attribute is required for the trigger element. -## Keyboard interaction +## Keyboard Interaction -The Blazor Sidebar component does not have any inbuilt keyboard interaction support. However, you can utilize the keyboard interactions of focusable elements within the Sidebar component. +The Blazor Sidebar component does not have any built-in keyboard interaction support. However, keyboard interactions of focusable elements within the Sidebar component can be utilized. -## Ensuring accessibility +## Ensuring Accessibility The Blazor Sidebar component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) software tool during automated testing. The accessibility compliance of the Sidebar component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/sidebar) in a new window to evaluate the accessibility of the Sidebar component with accessibility tools. -## See also +## See Also * [Accessibility in Syncfusion® Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility) \ No newline at end of file diff --git a/blazor/sidebar/auto-close.md b/blazor/sidebar/auto-close.md index c6e623b1da..4b68daa7d2 100644 --- a/blazor/sidebar/auto-close.md +++ b/blazor/sidebar/auto-close.md @@ -11,7 +11,7 @@ documentation: ug # Responsive Sidebar in Blazor Sidebar Component -[Blazor Sidebar](https://www.syncfusion.com/blazor-components/blazor-sidebar) often behaves differently on a mobile versus a desktop display. It has an effective feature that offers to set it in opened or closed state corresponding to the specified resolution. This is achieved through [`MediaQuery`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfSidebar.html#Syncfusion_Blazor_Navigations_SfSidebar_MediaQuery) property that allows to set the Sidebar in an expanded state or collapsed state only in user-defined resolution. +The [Blazor Sidebar](https://www.syncfusion.com/blazor-components/blazor-sidebar) often exhibits different behavior on mobile and desktop displays. An effective feature allows setting its opened or closed state corresponding to a specified resolution. This is achieved through the [`MediaQuery`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfSidebar.html#Syncfusion_Blazor_Navigations_SfSidebar_MediaQuery) property, which allows the Sidebar to be set to an expanded or collapsed state based on a user-defined resolution. In the following sample, **mediaQuery** has been used for specific resolution to close and open sidebar. @@ -46,4 +46,5 @@ In the following sample, **mediaQuery** has been used for specific resolution to ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VthoCNtFTZkcfsLg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Displaying Auto close in Blazor Sidebar](./images/blazor-sidebar-auto-close.gif) \ No newline at end of file diff --git a/blazor/sidebar/custom-context.md b/blazor/sidebar/custom-context.md index 0daab725f3..4371b38bbc 100644 --- a/blazor/sidebar/custom-context.md +++ b/blazor/sidebar/custom-context.md @@ -9,7 +9,7 @@ documentation: ug -# Sidebar for specific content in Blazor Sidebar Component +# Sidebar for Specific Content in Blazor Sidebar Component By default, [Blazor Sidebar](https://www.syncfusion.com/blazor-components/blazor-sidebar) initializes context to the body element. Using the [`Target`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfSidebar.html#Syncfusion_Blazor_Navigations_SfSidebar_Target) property, set context element to initialize Sidebar inside any HTML element apart from the body element. @@ -125,4 +125,5 @@ In the following sample, click the toggle button to expand or collapse the Sideb ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZhyiZZPJWXQVUGU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor Sidebar with Custom Context](./images/blazor-sidebar-custom-context.png) \ No newline at end of file diff --git a/blazor/sidebar/docking-sidebar.md b/blazor/sidebar/docking-sidebar.md index 4286d5a8a3..abd9934e2b 100644 --- a/blazor/sidebar/docking-sidebar.md +++ b/blazor/sidebar/docking-sidebar.md @@ -11,7 +11,7 @@ documentation: ug # Dock in Blazor Sidebar Component -Dock state of the [Blazor Sidebar](https://www.syncfusion.com/blazor-components/blazor-sidebar) reserves some space on the page that always remains in a visible state when the Sidebar is collapsed. It is used to show the short term of a content like icons alone instead of lengthy text. +The dock state of the [Blazor Sidebar](https://www.syncfusion.com/blazor-components/blazor-sidebar) reserves space on the page, remaining visible even when the Sidebar is collapsed. It is used to display a concise version of content, such as icons, instead of lengthy text. In the following sample, the list item has icon with text representation. On dock state only the icon listed out to interact. It can be achieved by using [`EnableDock`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfSidebar.html#Syncfusion_Blazor_Navigations_SfSidebar_EnableDock) property @@ -170,5 +170,5 @@ In the following sample, the list item has icon with text representation. On doc ``` - +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZroCDtlpsCxDdVf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Docking in Blazor Sidebar](./images/blazor-sidebar-dock.gif) \ No newline at end of file diff --git a/blazor/sidebar/getting-started-webapp.md b/blazor/sidebar/getting-started-webapp.md index 7a31434f9d..a099d8d59d 100644 --- a/blazor/sidebar/getting-started-webapp.md +++ b/blazor/sidebar/getting-started-webapp.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Sidebar in Blazor Web App -This section briefly explains about how to include [Blazor Sidebar](https://www.syncfusion.com/blazor-components/blazor-sidebar) 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 Sidebar](https://www.syncfusion.com/blazor-components/blazor-sidebar) 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 Sidebar](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&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +A **Blazor Web App** can be created using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) 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=vs) 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=vs) while creating a Blazor Web Application. ## Install Syncfusion® Blazor Navigations and Themes NuGet in the App To add **Blazor Sidebar** 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.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) 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, Syncfusion® Blazor component NuGet packages must be 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). +A **Blazor Web App** can be created 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) while 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 Navigations 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 containing the `.csproj` file. * Run the following command to install a [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. {% tabs %} @@ -116,9 +116,9 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of the 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 set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in both **~/Program.cs** files of the Blazor Web App. {% 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`, the project will contain a single **~/Program.cs** file. In this case, register the Syncfusion® Blazor Service only in that **~/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: @@ -251,10 +251,9 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Sidebar/BlazorWebApp). -## Enable backdrop +## Enable Backdrop -Enabling the [ShowBackdrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfSidebar.html#Syncfusion_Blazor_Navigations_SfSidebar_ShowBackdrop) in the Sidebar component will prevent the main content from user interactions. -Here, the DOM elements will not get changed. It only closes the main content by covering with a black backdrop overlay and focuses the Sidebar in the screen. +Enabling the [ShowBackdrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfSidebar.html#Syncfusion_Blazor_Navigations_SfSidebar_ShowBackdrop) property in the Sidebar component prevents user interactions with the main content. The DOM elements remain unchanged. The main content is merely visually obscured by a black backdrop overlay, focusing attention on the Sidebar. {% tabs %} {% highlight razor %} @@ -303,7 +302,7 @@ Here, the DOM elements will not get changed. It only closes the main content by {% endhighlight %} {% endtabs %} -N> Class can be added to the Sidebar element using `HtmlAttributes` property. In that class, you have to add new styles or override existing styles of Sidebar element. +N> Classes can be added to the Sidebar element using the `HtmlAttributes` property. Within that class, new styles can be added or existing Sidebar styles can be overridden. {% previewsample "https://blazorplayground.syncfusion.com/embed/BjhTjsAXUHEgsGGw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Enabling Backdrop in Blazor Sidebar](./images/blazor-sidebar-enable-backdrop.png)" %} diff --git a/blazor/sidebar/getting-started.md b/blazor/sidebar/getting-started.md index 9a159ecbae..86e25bc388 100644 --- a/blazor/sidebar/getting-started.md +++ b/blazor/sidebar/getting-started.md @@ -11,9 +11,9 @@ documentation: ug # Getting Started with Blazor Sidebar Component -This section briefly explains about how to include [Blazor Sidebar](https://www.syncfusion.com/blazor-components/blazor-sidebar) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section explains how to integrate the Syncfusion [Blazor Sidebar](https://www.syncfusion.com/blazor-components/blazor-sidebar) component into a Blazor WebAssembly App using Visual Studio and Visual Studio Code. -To get start quickly to create and configure the Blazor Sidebar in a Blazor WebAssembly app, you can check on this video. +To get started quickly to create and configure the Blazor Sidebar in a Blazor WebAssembly app, refer to this video. {% youtube "youtube:https://www.youtube.com/watch?v=HazXk0_mbE0" %} @@ -26,13 +26,13 @@ To get start quickly to create and configure the Blazor Sidebar in a Blazor WebA * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor App in Visual Studio +## Create a New Blazor 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). +A **Blazor WebAssembly App** can be created 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 Navigations and Themes NuGet in the App -To add **Blazor Sidebar** 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.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) 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 Sidebar** 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.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, the following package manager command can be used: {% 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 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). +A **Blazor WebAssembly App** can be created 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, a WebAssembly application can be created using the following command in the terminal (Ctrl+`): {% tabs %} @@ -73,7 +73,7 @@ cd BlazorApp ## Install Syncfusion® Blazor Navigations 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 that the current directory is the project root where the `.csproj` file is located. * Run the following command to install a [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. {% tabs %} @@ -107,7 +107,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -129,7 +129,7 @@ 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. @@ -140,9 +140,9 @@ 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 Blazor Sidebar component +## Add Blazor Sidebar Component Add the Syncfusion® Blazor Sidebar component in the **~/Pages/Index.razor** file. @@ -176,14 +176,13 @@ Add the Syncfusion® Blazor Sidebar componen {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Sidebar component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Sidebar component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/rNhJjsKXKHvqsDGC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Sidebar Component](./images/blazor-sidebar.png)" %} -## Enable backdrop +## Enable Backdrop -Enabling the [ShowBackdrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfSidebar.html#Syncfusion_Blazor_Navigations_SfSidebar_ShowBackdrop) in the Sidebar component will prevent the main content from user interactions. -Here, the DOM elements will not get changed. It only closes the main content by covering with a black backdrop overlay and focuses the Sidebar in the screen. +Enabling the [ShowBackdrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfSidebar.html#Syncfusion_Blazor_Navigations_SfSidebar_ShowBackdrop) property in the Sidebar component prevents user interactions with the main content. The DOM elements remain unchanged. The main content is merely visually obscured by a black backdrop overlay, focusing attention on the Sidebar. {% tabs %} {% highlight razor %} @@ -232,7 +231,7 @@ Here, the DOM elements will not get changed. It only closes the main content by {% endhighlight %} {% endtabs %} -N> Class can be added to the Sidebar element using `HtmlAttributes` property. In that class, you have to add new styles or override existing styles of Sidebar element. +N> Classes can be added to the Sidebar element using the `HtmlAttributes` property. Within that class, new styles can be added or existing Sidebar styles can be overridden. {% previewsample "https://blazorplayground.syncfusion.com/embed/BjhTjsAXUHEgsGGw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Enabling Backdrop in Blazor Sidebar](./images/blazor-sidebar-enable-backdrop.png)" %} diff --git a/blazor/sidebar/how-to/multiple-sidebar.md b/blazor/sidebar/how-to/multiple-sidebar.md index b7df26eeb8..c2443410e6 100644 --- a/blazor/sidebar/how-to/multiple-sidebar.md +++ b/blazor/sidebar/how-to/multiple-sidebar.md @@ -11,7 +11,7 @@ documentation: ug # Multiple Sidebar in Blazor Sidebar Component -Two Sidebars can be initialized in a web page with same main content. Sidebars can be initialized on right side or left side of the main content using [`Position`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfSidebar.html#Syncfusion_Blazor_Navigations_SfSidebar_Position) property. +Multiple Sidebars can be initialized on a web page sharing the same main content. Sidebars can be positioned on either the right or left side of the main content using the [`Position`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfSidebar.html#Syncfusion_Blazor_Navigations_SfSidebar_Position) property. N> The HTML element with class name `e-main-content` will be considered as the main content and both the Sidebars will behave as side content to this main content area of a web page. @@ -75,5 +75,5 @@ In the following sample, more than one Sidebar is rendered based on `Position` p ``` - +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBeWDjbptxxvPFD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor Multiple Sidebars](./../images/blazor-multiple-sidebars.png) \ No newline at end of file diff --git a/blazor/sidebar/how-to/open-and-close-the-sidebar.md b/blazor/sidebar/how-to/open-and-close-the-sidebar.md index 4221bdfc3e..357b4b51a6 100644 --- a/blazor/sidebar/how-to/open-and-close-the-sidebar.md +++ b/blazor/sidebar/how-to/open-and-close-the-sidebar.md @@ -9,11 +9,11 @@ documentation: ug -# Open and close the Sidebar in Blazor Sidebar Component +# Open and Close the Sidebar in Blazor Sidebar Component -Opening and closing the Sidebar can be achieved with [`IsOpen`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfSidebar.html#Syncfusion_Blazor_Navigations_SfSidebar_IsOpen) property. +Opening and closing the Sidebar is controlled by the [`IsOpen`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfSidebar.html#Syncfusion_Blazor_Navigations_SfSidebar_IsOpen) property. -In the following sample, `IsOpen` property has been used to show or hide the Sidebar on button click. +The following sample demonstrates using the `IsOpen` property to show or hide the Sidebar based on a button click. ```cshtml @@ -69,4 +69,5 @@ In the following sample, `IsOpen` property has been used to show or hide the Sid ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjBIsNZPpZcPXBbL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Opening and Closing Blazor Sidebar](./../images/OpenCloseSidebar.gif) \ No newline at end of file diff --git a/blazor/sidebar/how-to/sidebar-in-the-dotnet8-application.md b/blazor/sidebar/how-to/sidebar-in-the-dotnet8-application.md index c376702f19..5f7ae31c43 100644 --- a/blazor/sidebar/how-to/sidebar-in-the-dotnet8-application.md +++ b/blazor/sidebar/how-to/sidebar-in-the-dotnet8-application.md @@ -9,9 +9,9 @@ documentation: ug -# Render the Sidebar within the MainLayout of the .NET 8 Blazor Web app +# Render the Sidebar within the MainLayout of the .NET 8 Blazor Web App -Integrate the Blazor Sidebar component into the `MainLayout.razor` page of the .NET 8 application. Next, include the `@rendermode InteractiveServer` directive in the `Routes.razor` page of the application. When you specify InteractiveServer as the render mode for the Routes component, you are enabling interactive server-side rendering (SSR) for your entire Blazor application. +Integrate the Blazor Sidebar component into the `MainLayout.razor` page of the .NET 8 application. Next, include the `@rendermode InteractiveServer` directive in the `Routes.razor` page of the application. Specifying `InteractiveServer` as the render mode for the `Routes` component enables interactive server-side rendering (SSR) for the entire Blazor application. ```cshtml diff --git a/blazor/sidebar/how-to/sidebar-with-list-view.md b/blazor/sidebar/how-to/sidebar-with-list-view.md index 4e7eb226a1..066017f9c9 100644 --- a/blazor/sidebar/how-to/sidebar-with-list-view.md +++ b/blazor/sidebar/how-to/sidebar-with-list-view.md @@ -11,7 +11,7 @@ documentation: ug # Initialize the Blazor Sidebar with ListView -Any HTML element can be placed in the Sidebar content area. Sidebar supports all types of HTML structures like `TreeView`, `ListView`, etc. +Any HTML element can be placed in the Sidebar content area. The Sidebar supports all types of HTML structures like `TreeView`, `ListView`, etc. In the following example, the Sidebar is rendered with ListView component in its content area. @@ -159,4 +159,5 @@ In the following example, the Sidebar is rendered with ListView component in its ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVIsXXbpNbundyi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor Sidebar with ListView](./../images/blazor-sidebar-listview.png) \ No newline at end of file diff --git a/blazor/sidebar/state-persistence.md b/blazor/sidebar/state-persistence.md index 1021d3b575..15cb069028 100644 --- a/blazor/sidebar/state-persistence.md +++ b/blazor/sidebar/state-persistence.md @@ -9,7 +9,7 @@ documentation: ug # State Persistence in Blazor Sidebar Component -State persistence allows the Sidebar component to retain the [`IsOpen`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfSidebar.html#Syncfusion_Blazor_Navigations_SfSidebar_IsOpen) property value in [`localStorage`](https://www.w3schools.com/html/html5_webstorage.asp) for maintaining its state, even if the browser is refreshed or when navigating to a different page within the browser. +State persistence enables the Sidebar component to retain its [`IsOpen`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfSidebar.html#Syncfusion_Blazor_Navigations_SfSidebar_IsOpen) property value in [`localStorage`](https://www.w3schools.com/html/html5_webstorage.asp), thereby maintaining its state even after a browser refresh or navigation to a different page. This behavior is controlled by the [`EnablePersistence`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfSidebar.html#Syncfusion_Blazor_Navigations_SfSidebar_EnablePersistence) property, which is set to **false** by default. When set to **true**, the [`IsOpen`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfSidebar.html#Syncfusion_Blazor_Navigations_SfSidebar_IsOpen) property value of the Sidebar component will be retained even after a page refresh. diff --git a/blazor/sidebar/style.md b/blazor/sidebar/style.md index e059f61bbd..0b04a738bb 100644 --- a/blazor/sidebar/style.md +++ b/blazor/sidebar/style.md @@ -9,9 +9,9 @@ documentation: ug # Styles and Appearance in Blazor Sidebar Component -The following content provides the exact CSS structure that can be used to modify the component's appearance based on the user's preference. +This section provides the CSS structure that can be used to modify the component's appearance based on user preferences. -## Customizing the sidebar +## Customizing the Sidebar Use the below CSS to customize the Sidebar root element. @@ -23,7 +23,7 @@ Use the below CSS to customize the Sidebar root element. ``` -## Customizing the Sidebar based on the positions +## Customizing the Sidebar based on the Positions Use the below CSS to customize the left positioned sidebar. @@ -87,7 +87,7 @@ Use the below CSS to customize the closed state of the right positioned sidebar. ``` -## Customizing the Sidebar with dock state +## Customizing the Sidebar with Dock State When the Dock support is enabled, the "e-dock" class will be added to the root element. Based on that class, all the above stated customization can also be done. Use the following CSS to customize the Sidebar element with a dock state. @@ -99,7 +99,7 @@ When the Dock support is enabled, the "e-dock" class will be added to the root e ``` -## Customizing the different types of sidebar +## Customizing the Different types of Sidebar Use the below CSS to customize the auto type sidebar. @@ -141,7 +141,7 @@ Use the below CSS to customize the slide type sidebar. ``` -## Customizing the backdrop of the sidebar +## Customizing the Backdrop of the Sidebar Use the below CSS to customize the backdrop of the sidebar. @@ -153,7 +153,7 @@ Use the below CSS to customize the backdrop of the sidebar. ``` -## Customizing the Sidebar in the RTL direction +## Customizing the Sidebar in the RTL Direction When the RTL (right to left direction) support is enabled, the "e-rtl" class will be added to the root element. Based on that class, all the above stated customization can also be done. Use the following CSS to customize the Sidebar element in the RTL (right to left direction) mode.