Merge pull request #6870 from syncfusion-content/984382-tab2

Updated the UG document for the Tab Component

Author: VengateshManiraj

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.
 
 <div><img src="https://cdn.syncfusion.com/content/images/landing-page/no.png" alt="No"> - The component does not meet the requirement.</div>
 
-## 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
 |  <kbd>Shift + F10 </kbd> | <kbd>⇧</kbd> + <kbd>F10</kbd> | If popup mode is enabled, it opens the popup when the Tab is focused. |
 |  <kbd>Delete</kbd> | <kbd>Delete</kbd> | 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<sup style="font-size:70%">&reg;</sup> Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)

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)

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.
 

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)