diff --git a/blazor/tabs/accessibility.md b/blazor/tabs/accessibility.md index f6d8262db9..b680815687 100644 --- a/blazor/tabs/accessibility.md +++ b/blazor/tabs/accessibility.md @@ -9,7 +9,7 @@ documentation: ug # Accessibility in Blazor Tabs Component -The [Blazor Tabs](https://www.syncfusion.com/blazor-components/blazor-tabs) 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 Tabs](https://www.syncfusion.com/blazor-components/blazor-tabs) component follows 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 Tabs component is outlined below. @@ -37,7 +37,7 @@ The accessibility compliance for the Blazor Tabs component is outlined below.
No - The component does not meet the requirement.
-## WAI-ARIA attributes +## WAI-ARIA Attributes [Blazor Tabs](https://www.syncfusion.com/blazor-components/blazor-tabs) component is designed by considering [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/practices/) standard. Tab is supported with ARIA Accessibility which is accessible by on-screen readers, and other assistive technology devices. @@ -55,9 +55,9 @@ The following list of attributes are added in the Tab. | aria-haspopup | Attribute is set to the Popup element to indicates the popup mode in the Tab. The default value of this attribute is false. If popup mode is enabled, the attribute value is set to true. | | aria-disabled | Attribute set to the Tab items to It indicates the disabled state of the Tab. | -## Keyboard interaction +## Keyboard Interaction -By default, keyboard navigation is enabled. This component implements keyboard navigation support by following the [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices/#Tabpanel) practices. Once focused on the active Tab element, you can use the following key combination for interacting with the Tab. +By default, keyboard navigation is enabled. This component implements keyboard navigation support by following the [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices/#Tabpanel) practices. Once focus is on the active Tab element, the following key combinations can be used for interaction: | Windows | Mac | Actions | |--- |--- | --- | @@ -71,12 +71,12 @@ By default, keyboard navigation is enabled. This component implements keyboard n | Shift + F10 | ⇧ + F10 | If popup mode is enabled, it opens the popup when the Tab is focused. | | Delete | Delete | Deletes the Tab, if close button is enabled in Tab header. | -## Ensuring accessibility +## Ensuring Accessibility The Blazor Tabs 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 Tabs component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/tab) in a new window to evaluate the accessibility of the Tabs 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/tabs/animations.md b/blazor/tabs/animations.md index e9fe499283..507aca7cd2 100644 --- a/blazor/tabs/animations.md +++ b/blazor/tabs/animations.md @@ -11,7 +11,9 @@ documentation: ug The [Blazor Tabs](https://www.syncfusion.com/blazor-components/blazor-tabs) component supports custom animations for both previous and next actions from the provided animation option of `Animation` library. The animation property also allows to set `Easing`, `Duration` and various other effects. -Default animation is given as `SlideLeftIn` for previous tab animation and `SlideRightIn` for next tab animation. Disable the animation by setting the animation `Effect` as `None`. Also, use the following CSS to disable indicator animation for animation `Effect` as `None`. +By default, `SlideLeftIn` is used for the previous tab animation, and `SlideRightIn` is used for the next tab animation. Disable animation by setting the animation `Effect` to `AnimationEffect.None`. + +To disable the indicator animation when the `Effect` is `None`, use the following CSS: ```CSS @@ -125,4 +127,6 @@ The sample demonstrates some types of animation that suits our Tabs. Check all t } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVyWjCNCngbWXGc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Blazor Tabs with Animation](./images/blazor-tabs-animation.gif) \ No newline at end of file diff --git a/blazor/tabs/content-render-modes.md b/blazor/tabs/content-render-modes.md index 9cb166676f..dd743fcee2 100644 --- a/blazor/tabs/content-render-modes.md +++ b/blazor/tabs/content-render-modes.md @@ -9,17 +9,17 @@ documentation: ug # Content Render Modes in Blazor Tabs Component -In [Blazor Tabs](https://www.syncfusion.com/blazor-components/blazor-tabs), the content of the Tabs can be rendered based on the scenario. The content rendering of tabs can be done by the following three different ways. +In the [Blazor Tabs](https://www.syncfusion.com/blazor-components/blazor-tabs) component, content can be rendered according to specific scenarios using three different modes: * [Dynamic rendering](#dynamic-rendering) * [On Demand rendering or lazy loading](#on-demand-rendering-or-lazy-loading) * [On initial rendering](#on-initial-rendering) -## Dynamic rendering +## Dynamic Rendering This mode is the default one in which the content of the selected tab alone will be loaded and available in DOM initially and it will be replaced with corresponding content if you select the tab dynamically. Since in this mode, the browser maintains the DOM with current active tab content alone, page loading performance is increased with rendering DOM. But the Tabs doesn't maintain its current state since every time tab loaded with fresh content. -In the following code example, there are two tabs. The first tab have a login page and second tab have Grid component. The second tab Grid component will be rendered in the DOM only when the login is completed. The second tab will be replaced the first tab in the DOM. +In the following code example, there are two tabs. The second tab's Grid component is rendered in the DOM only after a successful login in the first tab. The second tab will be replaced the first tab in the DOM. ```cshtml @using Syncfusion.Blazor.Buttons @@ -127,11 +127,11 @@ In the following code example, there are two tabs. The first tab have a login pa } ``` -N> In this mode, if you want to maintain the state, you have to handle it in application end. +N> To maintain the state in this mode, manage it within the application logic. -## On Demand rendering or lazy loading +## On Demand Rendering or Lazy Loading -You can set this mode to our Tabs by setting `ContentLoad.Demand` to the property `LoadOn`. In this mode, the content of the selected tab alone will be loaded initially. The content of the selected tab will be rendered on selection. The content of the tabs which were loaded once will be maintained in the DOM. In this mode, since the selected tab content alone rendered on initial load and maintained the other tabs on selection in the DOM, state of the tabs like scroller position, form values etc.., will be maintained. +Enable this mode by setting the `LoadOn` property to `ContentLoad.Demand`. In this mode, only the content of the initially selected tab is loaded into the DOM. Content for other tabs is rendered only when they are selected for the first time. Once loaded, the content of these tabs is maintained in the DOM. This approach ensures state preservation for components within tabs (e.g., scroll position, form values) while optimizing initial load times. In the following code example, Calendar and Scheduler have been rendered in first and second tab respectively. Initially, Scheduler is not available once the second tab is selected, scheduler will be rendered. Both the calendar and scheduler will be maintained in DOM, changing the date either in calendar or scheduler will change the date in other. @@ -173,9 +173,9 @@ In the following code example, Calendar and Scheduler have been rendered in firs } ``` -## On initial rendering +## On Initial Rendering - This mode can be set to the Tabs by setting `ContentLoad.Init` to the property `LoadOn`. In this mode, the content of all the tabs will be rendered on initial load and maintained in the DOM. You can use this mode, when you have less number of tabs and you need to maintain the state of tabs. In this mode, you can access the reference of components rendered in other tabs. +Enable this mode by setting the `LoadOn` property to `ContentLoad.Init`. In this mode, the content of all tabs is rendered and loaded into the DOM initially. This mode is suitable for a smaller number of tabs, where maintaining the state of all tabs is a priority and you need to access components rendered in other tabs directly (e.g., via component references). In the following example, all the three tabs are rendered in initial load itself and the data entered in the first tab will be maintained even when second or third tab is in active state. diff --git a/blazor/tabs/drag-and-drop.md b/blazor/tabs/drag-and-drop.md index c7c4c6cd58..47c3e16c71 100644 --- a/blazor/tabs/drag-and-drop.md +++ b/blazor/tabs/drag-and-drop.md @@ -11,17 +11,16 @@ documentation: ug The [Blazor Tab](https://www.syncfusion.com/blazor-components/blazor-tabs) component allows to drag and drop any item by setting `AllowDragAndDrop`  to **true**. Items can be reordered to any place by dragging and dropping them onto the desired location. -* If you need to prevent dragging action for a particular item, the `OnDragStart` event can be used which will trigger when the item drag is started. If you need to prevent dropping action for a particular item, the `Dragged` event can be used which will trigger when the drag action is stopped. - -* The `DragArea` defines the area in which the draggable element movement will be occurring. Outside that area will be restricted for the draggable element movement. - -* The `OnDragStart` event will be triggered before dragging the item from Tab. - -* The `Dragged` event will be triggered when the Tab item is dropped on the target element successfully. +* **Preventing Dragging:** To prevent dragging for a particular item, the [`OnDragStart`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TabEvents.html#Syncfusion_Blazor_Navigations_TabEvents_OnDragStart) event can be used. This event triggers when an item's drag action begins, allowing for conditional cancellation. +* **Preventing Dropping:** To prevent dropping for a particular item, the [`OnDrop`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TabEvents.html#Syncfusion_Blazor_Navigations_TabEvents_OnDrop) event (or `Dragged` event for post-drop logic) can be used. The `Dragged` event triggers when the drag action is stopped (i.e., the item is dropped). +* **Defining Drag Area:** The [`DragArea`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTab.html#Syncfusion_Blazor_Navigations_SfTab_DragArea) property defines the boundary within which a draggable element can be moved. Movement outside this area is restricted. +* **Event Triggering:** + * The `OnDragStart` event triggers before dragging an item from the Tab. + * The `Dragged` event triggers when the Tab item is dropped successfully onto a target element. In the following sample, the `AllowDragAndDrop` property is enabled. -N> External drag and drop is not possible in blazor Tabs. +N> External drag and drop (dragging items from outside the Tabs component into it, or vice-versa) is not directly supported by the Blazor Tabs component's `AllowDragAndDrop` feature. ```cshtml @using Syncfusion.Blazor.Navigations @@ -61,4 +60,6 @@ N> External drag and drop is not possible in blazor Tabs. ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVeMNiNCxoJPste?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Drag and Drop Items in Blazor Tabs](./images/blazor-tabs-drag-drop-items.gif) \ No newline at end of file diff --git a/blazor/tabs/getting-started-webapp.md b/blazor/tabs/getting-started-webapp.md index ba0014d5fd..ef5f5124eb 100644 --- a/blazor/tabs/getting-started-webapp.md +++ b/blazor/tabs/getting-started-webapp.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting started with Syncfusion Tabs Component in Blazor Web App +title: Getting Started with Blazor Tabs in Blazor Web App | Syncfusion description: Check out the documentation for getting started with Syncfusion Blazor Tabs Components in Blazor Web App. platform: Blazor control: Tabs @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Tabs in Blazor Web App -This section briefly explains about how to include [Blazor Tabs](https://www.syncfusion.com/blazor-components/blazor-tabs) 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 Tabs](https://www.syncfusion.com/blazor-components/blazor-tabs) 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 Tabs](https://www.syn * [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). +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). -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) when creating a Blazor Web Application. ## Install Syncfusion® Blazor Navigations and Themes NuGet in the App To add **Blazor Tabs** 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). +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 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 components 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.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`, you need to 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`, the project will contain a single **~/Program.cs** file. 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: @@ -189,9 +189,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 Syncfusion® Blazor Tabs component +## Add Syncfusion® Blazor Tabs Component Add the Syncfusion® Blazor Tabs component in the **~Pages/.razor** file. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows: @@ -245,9 +245,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/Tabs/BlazorWebApp). -## Initialize Blazor Tab Content using Template +## Initialize Blazor Tab Content Using Template -Tab provides support to render content using `ContentTemplate` property. You can give preferred content inside the `ContentTemplate` element. +The Tab component supports rendering content using the `ContentTemplate` property. Preferred content can be placed inside the `ContentTemplate` element. N> `ContentTemplate` property supports `RenderFragment` type to render content. @@ -290,9 +290,9 @@ The following code explains how to initialize tab content using `ContentTemplate {% previewsample "https://blazorplayground.syncfusion.com/embed/rjLfjWqNJeVdyLDk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Tabs with Template](./images/blazor-tabs-template.png)" %} -## Two way binding of SelectedItem +## Two-Way Binding of SelectedItem -The property [SelectedItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTab.html#Syncfusion_Blazor_Navigations_SfTab_SelectedItem) supports two way property binding, in the following code example if either the value is changed in numeric text box or selected tab item is changed, it will reflect in both the value of numeric text box and selected tab item. +The property [SelectedItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTab.html#Syncfusion_Blazor_Navigations_SfTab_SelectedItem) supports two way property binding. In the following code example, if the selected tab item is changed either via the numeric text box or directly, the bound property and the UI will update accordingly. {% tabs %} {% highlight razor %} @@ -342,7 +342,7 @@ Selected Tab {% previewsample "https://blazorplayground.syncfusion.com/embed/LXBzDCgNzyqUhxZn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Tabs with Data Binding](./images/blazor-tabs-data-binding.png)" %} -## See also +## See Also 1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) 2. [Getting Started with Syncfusion® Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) diff --git a/blazor/tabs/getting-started.md b/blazor/tabs/getting-started.md index 44d3f188bd..48f8861eda 100644 --- a/blazor/tabs/getting-started.md +++ b/blazor/tabs/getting-started.md @@ -9,9 +9,9 @@ documentation: ug # Getting Started with Blazor Tabs Component -This section briefly explains about how to include [Blazor Tabs](https://www.syncfusion.com/blazor-components/blazor-tabs) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section explains how to integrate the Syncfusion [Blazor Tabs](https://www.syncfusion.com/blazor-components/blazor-tabs) component into a Blazor WebAssembly App using Visual Studio and Visual Studio Code. -To get start quickly with Blazor Tabs, you can check on this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Tabs) sample: +To get started quickly with the Blazor Tabs component, watch this video or refer to the [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Tabs) sample: {% youtube "youtube:https://www.youtube.com/watch?v=8OgywAA_XHg"%} @@ -24,9 +24,9 @@ To get start quickly with Blazor Tabs, you can check on this video or [GitHub](h * [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). +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 Navigations and Themes NuGet in the App @@ -51,11 +51,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). +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 %} @@ -71,7 +71,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 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 %} @@ -105,7 +105,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" %} @@ -127,7 +127,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. @@ -138,9 +138,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 Tabs component +## Add Blazor Tabs Component Add the Syncfusion® Blazor Tabs component in the **~/Pages/Index.razor** file. @@ -176,7 +176,7 @@ Add the Syncfusion® Blazor Tabs component i ## Initialize Blazor Tab Content using Template -Tab provides support to render content using `ContentTemplate` property. You can give preferred content inside the `ContentTemplate` element. +The Tab component supports rendering content using the `ContentTemplate` property. Preferred content can be placed inside the `ContentTemplate` element. N> `ContentTemplate` property supports `RenderFragment` type to render content. @@ -219,9 +219,9 @@ The following code explains how to initialize tab content using `ContentTemplate {% previewsample "https://blazorplayground.syncfusion.com/embed/rjLfjWqNJeVdyLDk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Tabs with Template](./images/blazor-tabs-template.png)" %} -## Two way binding of SelectedItem +## Two-Way Binding of SelectedItem -The property [SelectedItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTab.html#Syncfusion_Blazor_Navigations_SfTab_SelectedItem) supports two way property binding, in the following code example if either the value is changed in numeric text box or selected tab item is changed, it will reflect in both the value of numeric text box and selected tab item. +The [`SelectedItem`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTab.html#Syncfusion_Blazor_Navigations_SfTab_SelectedItem) property supports two-way data binding. In the following code example, if the selected tab item is changed either via the numeric text box or directly, the bound property and the UI will update accordingly. {% tabs %} {% highlight razor %} @@ -271,10 +271,10 @@ Selected Tab {% previewsample "https://blazorplayground.syncfusion.com/embed/LXBzDCgNzyqUhxZn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Tabs with Data Binding](./images/blazor-tabs-data-binding.png)" %} -## See also +## See Also 1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) 2. [Getting Started with Syncfusion® Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) 3. [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 Tabs example](https://blazor.syncfusion.com/demos/tabs/default-functionalities?theme=bootstrap5) that shows you how to render and configure the tabs. +N> Explore the [Blazor Tabs example](https://blazor.syncfusion.com/demos/tabs/default-functionalities?theme=bootstrap5) for a demonstration on rendering and configuring the tabs. diff --git a/blazor/tabs/header.md b/blazor/tabs/header.md index 31f961e9d9..ff5438477a 100644 --- a/blazor/tabs/header.md +++ b/blazor/tabs/header.md @@ -9,7 +9,7 @@ documentation: ug # Header in Blazor Tabs Component -This section explains about modifying the style of Tab header. +This section explains how to modify the style of the Blazor Tab header. ## Styles @@ -105,11 +105,13 @@ N> If the above custom style classes are not included in the root element, the d ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVIWtsDMnbXhmcO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Blazor Tabs with Header](./images/blazor-tabs-header.png) ## Icon positions -The position of the Tab header icons can be customized using the [IconPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TabHeader.html#Syncfusion_Blazor_Navigations_TabHeader_IconPosition) property. This property depends on the header items [IconCSS](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TabHeader.html#Syncfusion_Blazor_Navigations_TabHeader_IconCss) property. By default, Tab header icon is placed on left position. The position values are as follows: +The position of the Tab header icons can be customized using the [IconPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TabHeader.html#Syncfusion_Blazor_Navigations_TabHeader_IconPosition) property. This property depends on the header items [IconCSS](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TabHeader.html#Syncfusion_Blazor_Navigations_TabHeader_IconCss) property. By default, the Tab header icon is positioned on the left. The available position values are as follows: * **Left**: Icon is placed on the left of the Tab header item. * **Right**: Icon is placed on the right of the Tab header item. @@ -244,12 +246,13 @@ The position of the Tab header icons can be customized using the [IconPosition]( } ``` -![Blazor Tabs with Icon](./images/blazor-tabs-icon.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjreMDWXCRbuwCzP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![Blazor Tabs with Icon](./images/blazor-tabs-icon.png) -## Add floating button to the right of existing tabs +## Dynamically Add Tabs with a Floating Button -You can add floating button to the right of existing tabs by adding button inside the [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TabItem.html#Syncfusion_Blazor_Navigations_TabItem_HeaderTemplate) of last TabItem. +You can add dynamic tab items by integrating a button into the [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TabItem.html#Syncfusion_Blazor_Navigations_TabItem_HeaderTemplate) of last TabItem. Here, New tab items added when user clicks on the `Button` inside `HeaderTemplate`. @@ -292,6 +295,8 @@ Here, New tab items added when user clicks on the `Button` inside `HeaderTemplat } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLyMZMNiHOIBqEa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Blazor Tabs with Floating button](./images/blazor-tabs-floating-button.png) N> [View Sample in GitHub](https://github.com/SyncfusionExamples/How-to-add-floating-button-to-the-right-of-tabs-in-Blazor-Tab) diff --git a/blazor/tabs/orientation.md b/blazor/tabs/orientation.md index 51b5210e98..28333fc2af 100644 --- a/blazor/tabs/orientation.md +++ b/blazor/tabs/orientation.md @@ -9,7 +9,7 @@ documentation: ug # Orientation in Blazor Tabs Component -This section explains about modifying the position and modes of Tab header. +This section explains how to modify the position and overflow modes of the Tab header. It allows placing the header section inside the Tabs component at different positions by using the [HeaderPlacement](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTab.html#Syncfusion_Blazor_Navigations_SfTab_HeaderPlacement) property. The available positions are as follows: @@ -20,8 +20,8 @@ It allows placing the header section inside the Tabs component at different posi It is also adaptable to the available space when the tab items exceed the view space. The modes can be customized by using [OverflowMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTab.html#Syncfusion_Blazor_Navigations_SfTab_OverflowMode) property. The available modes are as follows: -* Scrollable -* Popup +* **Scrollable**: When tab items exceed the available space, a scrollbar appears, allowing horizontal or vertical scrolling depending on the `HeaderPlacement`. +* **Popup**: When tab items exceed the available space, a "more" button appears (typically at the end of the header). Clicking this button opens a dropdown or popup displaying the hidden tab items. ```cshtml @using Syncfusion.Blazor.Navigations @@ -158,4 +158,6 @@ It is also adaptable to the available space when the tab items exceed the view s ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXBSWDMNWwjfHxnt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Blazor Tabs with Horizontal Orientation](./images/blazor-tabs-orientation.gif) \ No newline at end of file diff --git a/blazor/tabs/responsive-modes.md b/blazor/tabs/responsive-modes.md index 1719ea1ffa..ccd5c218ef 100644 --- a/blazor/tabs/responsive-modes.md +++ b/blazor/tabs/responsive-modes.md @@ -9,23 +9,23 @@ documentation: ug # Responsive Modes in Blazor Tabs Component -The following section explains about rendering tab when its width exceeds the viewable area or particularly in a given width. The available modes are as follows: +This section explains how the Blazor Tabs component handles scenarios where its width exceeds the available viewable area. The available overflow modes are as follows: * Scrollable * Popup ## Scrollable -The default [OverflowMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTab.html#Syncfusion_Blazor_Navigations_SfTab_OverflowMode) is `Scrollable`. Scrollable display mode supports displaying the Tab header items in a single line with horizontal scrolling enabled, when the item overflows to the available space. +The default [OverflowMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTab.html#Syncfusion_Blazor_Navigations_SfTab_OverflowMode) is `Scrollable`. This mode displays the Tab header items in a single line, enabling horizontal scrolling when items overflow the available space. Scrollable mode supports overflow for both horizontal (`Top`, `Bottom`) and vertical (`Left`, `Right`) `HeaderPlacement` configurations. -* The right and left navigation arrow is added at the start and end of the Tab header through which user can navigate towards overflowed items of the Tab header. -* You can also see the overflowed items using touch and swipe action on the header and content section. -* By default, navigation icon in the left direction is disabled, you can see the overflowed items by moving in the right direction. -* By clicking the arrow or by holding the arrow continuously, you can see the overflowed items. +* Right and left navigation arrows appear at the start and end of the Tab header, allowing users to navigate through overflowed items. +* Overflowed items are also accessible via touch and swipe gestures on the header and content sections. +* By default, the left navigation arrow is disabled. To view overflowed items, move in the right direction. +* Clicking or holding an arrow continuously reveals the overflowed items. ![Scrolling in Blazor Tabs](images/blazor-tabs-scroll.gif) -* In devices the navigation icons are not available. You can touch and swipe to see the overflowed items of the Tab header. +* On devices, navigation arrows are not present. Instead, touch and swipe gestures reveal the overflowed Tab header items. ![Touch Scroll in Blazor Tabs](images/blazor-tabs-touch-scroll.gif) @@ -78,6 +78,8 @@ The default [OverflowMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLeWDsXMGsUnVxP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Scrolling in Blazor Tabs](./images/blazor-tabs-scrolling.png) ## Popup @@ -86,7 +88,7 @@ The `Popup` is the another type of [OverflowMode](https://help.syncfusion.com/cr * The items placed in popup can be viewed by opening the popup with the help of drop-down icon given at the end of the Tab header. -* If the popup height exceeds the height of the visible area, you can scroll through the popup items and select one. +* If the popup's height exceeds the visible area, scroll through the popup items to select one. ![Blazor Tabs with Popup](images/blazor-tabs-popup.gif) @@ -139,4 +141,6 @@ The `Popup` is the another type of [OverflowMode](https://help.syncfusion.com/cr ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBeijWDswLWviRe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Blazor Tabs with Popup](./images/blazor-tabs-popup.png) \ No newline at end of file diff --git a/blazor/tabs/style.md b/blazor/tabs/style.md index db02d43818..f69992121d 100644 --- a/blazor/tabs/style.md +++ b/blazor/tabs/style.md @@ -11,7 +11,7 @@ documentation: ug The following content provides the exact CSS structure that can be used to modify the control’s appearance based on user preference. -## Customizing Tab +## Customizing the Tab Component Use the following CSS to customize the Tab. @@ -53,7 +53,7 @@ Use the following CSS to customize the content items of Tab. ![Customize Tab](./images/blazor-tabs-customize-content.png) -## Customizing Tab's header +## Customizing Tab's Header Use the following CSS to customize the header of Tab control. @@ -67,7 +67,7 @@ Use the following CSS to customize the header of Tab control. ![Customize Tab](./images/blazor-tabs-header-customization.png) -## Customizing Tab's header icon +## Customizing Tab's Header Icon Use the following CSS to customize the header item icon of Tab control. @@ -81,7 +81,7 @@ Use the following CSS to customize the header item icon of Tab control. ![Customize Tab](./images/blazor-tabs-header-icon-customization.png) -## Customizing Tab's content +## Customizing Tab's Content Use the following CSS to customize the content of Tab control. @@ -95,7 +95,7 @@ Use the following CSS to customize the content of Tab control. ![Customize Tab](./images/blazor-tabs-customize-content-background.png) -## Customizing the hover state of Tab control +## Customizing the Hover State of Tab Control Use the following CSS to customize the tab item when hovering. @@ -120,7 +120,7 @@ Use the following CSS to customize the tab item popup icon when hovering. ``` -## Customizing selected item of Tab control +## Customizing Selected Item of Tab Control Use the following CSS to customize the selected tab item.