Skip to content

Commit 3cfe541

Browse files
VengateshManirajVengateshManiraj
authored
Merge pull request #6864 from syncfusion-content/984382-tabs
Updated the UG document for the Tab Component
2 parents 0297c53 + 0761e30 commit 3cfe541

12 files changed

+75
-48
lines changed

‎blazor/tabs/how-to/add-nested-tabs.md‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
---
22
layout: post
3-
title: Add nested tabs in Blazor Tabs Component | Syncfusion
3+
title: Add Nested Tabs in Blazor Tabs Component | Syncfusion
44
description: Checkout and learn here all about how to add nested tabs in Syncfusion Blazor Tabs component and much more.
55
platform: Blazor
66
control: Tabs
77
documentation: ug
88
---
99

10-
# Add nested tabs in Blazor Tabs Component
10+
# Add Nested Tabs in Blazor Tabs Component
1111

12-
The tabs control supports to render the nested level of tabs by using the `ContentTemplate` property. To render the nested tabs, define the nested tab elements within the `ContentTemplate` property of the parent tab.
12+
The Tabs component supports rendering nested tabs by defining inner `SfTab` elements within the `ContentTemplate` of the parent `TabItem`.
1313

1414
```cshtml
1515
@using Syncfusion.Blazor.Navigations
@@ -98,4 +98,6 @@ The tabs control supports to render the nested level of tabs by using the `Conte
9898
</SfTab>
9999
```
100100

101+
{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLSCXDOJolASAjp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
102+
101103
![Adding Blazor Nested Tabs](../images/blazor-nested-tabs.png)

‎blazor/tabs/how-to/add-remove-tab-items.md‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
11
---
22
layout: post
3-
title: Add/Remove Tab items in Blazor Tabs Component | Syncfusion
3+
title: Add/Remove Tab Items in Blazor Tabs Component | Syncfusion
44
description: Checkout and learn here all about how to add or remove tab items in Syncfusion Blazor Tabs component and more.
55
platform: Blazor
66
control: Tabs
77
documentation: ug
88
---
99

10-
# Add/Remove Tab items in Blazor Tabs Component
10+
# Add/Remove Tab Items in Blazor Tabs Component
1111

12-
Tabs provides a support to add or remove the specified tab item using following ways.
12+
The Tabs component supports adding or removing specified tab items dynamically using the following methods:
1313

1414
* Using conditional rendering.
1515
* Using public methods.
1616

17-
## Using conditional rendering
17+
## Using Conditional Rendering
1818

19-
Tab items can be added or removed dynamically by iteration of tab items using conditional **foreach** loop.
19+
Tab items can be added or removed dynamically by conditionally rendering them within a `foreach` loop.
2020

21-
In the following demo, initially there are three tabs as the **TabItems** has three items. On `Add Item` button click, new item is added to the **TabItems** results in adding fourth tab to the Tabs component. On clicking the `Remove Item`, the first item of **TabItems** has been removed which results in removing first tab of our Tabs component.
21+
In the following demo, initially, three tabs are present based on the `TabItems` collection. When the `Add Item` button is clicked, a new item is added to `TabItems`, resulting in a new (fourth) tab being displayed. Clicking the `Remove Item` button removes the first item from `TabItems`, which, in turn, removes the first tab from the Tabs component.
2222

2323
```cshtml
2424
@using Syncfusion.Blazor.Navigations
@@ -88,11 +88,13 @@ In the following demo, initially there are three tabs as the **TabItems** has th
8888
}
8989
```
9090

91+
{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVIMXXuJouUThMs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
92+
9193
![Adding or Removing TabItems in Blazor Tabs](../images/blazor-tabs-add-remove-item.png)
9294

93-
## Using public methods
95+
## Using Public Methods
9496

95-
Tabs can be added dynamically by passing list of items and index value to the `AddTab` method. The tab items can be removed by passing the specified item through `RemoveTab` method. Tab items can also be removed by clicking the close icon which appears on the tab header on setting true to `ShowCloseButton` property.
97+
Tabs can be added dynamically by passing a list of `TabItem` objects and an index value to the `AddTab` method. Tab items can be removed by passing the item's index to the `RemoveTab` method. Tab items can also be removed by clicking the close icon, which appears on the tab header when the `ShowCloseButton` property is set to `true`.
9698

9799
In the following demo, a tab item can be added as first tab and removed as the last tab item by clicking the **Add Tab** and **Remove Last Tab** buttons respectively.
98100

@@ -148,5 +150,6 @@ In the following demo, a tab item can be added as first tab and removed as the l
148150
}
149151
</style>
150152
```
153+
{% previewsample "https://blazorplayground.syncfusion.com/embed/hXrSCjjupRNsuVnI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
151154

152155
![Adding or Removing TabItems in Blazor Tabs](../images/blazor-tabs-add-remove-tabitems.png)

‎blazor/tabs/how-to/create-wizard-using-tab.md‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
---
22
layout: post
3-
title: Create wizard in Blazor Tabs Component | Syncfusion
3+
title: Create Wizard in Blazor Tabs Component | Syncfusion
44
description: Checkout and learn here all about how to create wizard in Syncfusion Blazor Tabs component and much more details.
55
platform: Blazor
66
control: Tabs
77
documentation: ug
88
---
99

10-
# Create wizard in Blazor Tabs Component
10+
# Create Wizard in Blazor Tabs Component
1111

12-
Tab items can be disabled during initial control rendering by passing the boolean value and tab index to the [EnableTab](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTab.html#Syncfusion_Blazor_Navigations_SfTab_EnableTab_System_Int32_System_Boolean_) public method.
12+
Tab items can be disabled during initial control rendering by passing the tab index and a boolean value to the [EnableTab](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTab.html#Syncfusion_Blazor_Navigations_SfTab_EnableTab_System_Int32_System_Boolean_) public method.
1313

1414
In the below Wizard sample, each tab is integrated with required components to complete the reservation. Each field is provided with validation for all mandatory option to proceed to next tabs. Using tab item's template property the components are added into content.
1515

@@ -23,7 +23,7 @@ Create the following contents for each tab in the wizard.
2323
4. **Payment tab:**
2424
Calculate the ticket cost and generate data for Grid with passenger details, train number and ticket cost summary.
2525

26-
You can go back on each tab using buttons available in it and tabs are disabled to navigate through tab header click actions.
26+
Users can navigate back to previous tabs using dedicated buttons within each content section. Navigation via tab headers is initially disabled to enforce linear progression.
2727

2828
```cshtml
2929
@using Syncfusion.Blazor.Navigations
@@ -515,5 +515,6 @@ You can go back on each tab using buttons available in it and tabs are disabled
515515
}
516516
</style>
517517
```
518+
{% previewsample "https://blazorplayground.syncfusion.com/embed/VjBeWXZaJnBqEgLl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
518519

519520
![Blazor Tabs with Wizard](../images/blazor-tabs-wizard.png)

‎blazor/tabs/how-to/customize-selected-tab-styles.md‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
---
22
layout: post
3-
title: Style Customization for active item in Blazor Tabs | Syncfusion
3+
title: Style Customization for Active Item in Blazor Tabs | Syncfusion
44
description: Learn here all about style customization for active item in Syncfusion Blazor Tabs component, it's elements and more.
55
platform: Blazor
66
control: Tabs
77
documentation: ug
88
---
99

10-
# Style Customization for active Item in Blazor Tabs Component
10+
# Style Customization for Active Item in Blazor Tabs Component
1111

12-
The style of tabs can be customized by overriding its header and active tab CSS classes. Define HTML string for adding animation and customizing the tab header and pass it to [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TabHeader.html#Syncfusion_Blazor_Navigations_TabHeader_Text) property. Now you can override the style using custom CSS classes added to the tab elements.
12+
The style of tabs can be customized by overriding their header and active tab CSS classes. Use the `HeaderTemplate` property of `TabItem` to define custom HTML content, including elements for animation and styling. The appearance can then be controlled using custom CSS classes added to these tab elements.
1313

1414
```cshtml
1515
@using Syncfusion.Blazor.Navigations
@@ -113,4 +113,6 @@ The style of tabs can be customized by overriding its header and active tab CSS
113113
</style>
114114
```
115115

116+
{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhoiDtYTxTdRTJj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
117+
116118
![Customizing active tabitem in Blazor Tabs](../images/blazor-tabs-custom-active-tabitem.png)

‎blazor/tabs/how-to/customize-the-scrolling-distance.md‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
---
22
layout: post
3-
title: Customize the Scrolling distance in Blazor Tabs Component | Syncfusion
3+
title: Customize the Scrolling Distance in Blazor Tabs Component | Syncfusion
44
description: Checkout and learn here all about how to customize the scrolling distance in Syncfusion Blazor Tabs component and more.
55
platform: Blazor
66
control: Tabs
77
documentation: ug
88
---
99

10-
# Customize the Scrolling distance in Blazor Tabs Component
10+
# Customize the Scrolling Distance in Blazor Tabs Component
1111

12-
The [ScrollStep](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTab.html#Syncfusion_Blazor_Navigations_SfTab_ScrollStep) property supports to customize the scrolling distance when you click the left and right side navigation icons. A required value can be passed through `ScrollStep` property to customize tab scrolling distance.
12+
The [`ScrollStep`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTab.html#Syncfusion_Blazor_Navigations_SfTab_ScrollStep) property customizes the scrolling distance when the left and right navigation icons are clicked. A desired value can be assigned to the `ScrollStep` property to fine-tune tab scrolling behavior.
1313

1414
```cshtml
1515
@using Syncfusion.Blazor.Navigations
@@ -78,4 +78,6 @@ The [ScrollStep](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigat
7878
}
7979
```
8080

81+
{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBSitjufndwEitI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
82+
8183
![Customizing Scrolling TabItems in Blazor Tabs](../images/blazor-tabs-custom-scroll.gif)

‎blazor/tabs/how-to/enable-or-disable-tab-item.md‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,11 @@ control: Tabs
77
documentation: ug
88
---
99

10-
# Enable/Disable Tab item in Blazor Tabs Component
10+
# Enable/Disable Tab Item in Blazor Tabs Component
1111

12-
The [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TabItem.html#Syncfusion_Blazor_Navigations_TabItem_Disabled) property of the Tab item is used to enable or disable the item by setting false or true value to the property. In the following demo, specified tab item is enabled and disabled dynamically when you click **Enable/Disable First Item** button.
12+
The [`Disabled`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TabItem.html#Syncfusion_Blazor_Navigations_TabItem_Disabled) property of a `TabItem` is used to enable or disable the item. Setting it to `true` disables the item, while setting it to `false` enables it.
13+
14+
In the following demo, the first tab item is dynamically enabled and disabled when the **Enable/Disable First Item** button is clicked.
1315

1416
```cshtml
1517
@@ -50,4 +52,6 @@ The [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigatio
5052
5153
```
5254

55+
{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLSitjufnGereTQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
56+
5357
![Enabling or Disabling TabItem in Blazor Tabs](../images/blazor-tabs-enable-disable-tabitem.gif)

‎blazor/tabs/how-to/prevent-content-swipe-selection.md‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
11
---
22
layout: post
3-
title: Prevent content swipe selection in Blazor Tabs Component | Syncfusion
3+
title: Prevent Content Swipe Selection in Blazor Tabs Component | Syncfusion
44
description: Checkout and learn here all about how to prevent content swipe selection in Syncfusion Blazor Tabs component and more.
55
platform: Blazor
66
control: Tabs
77
documentation: ug
88
---
99

1010

11-
# Prevent content swipe selection in Blazor Tabs Component
11+
# Prevent Content Swipe Selection in Blazor Tabs Component
1212

13-
The [`SwipeMode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTab.html#Syncfusion_Blazor_Navigations_SfTab_SwipeMode) property in the Tab component allows users to navigate between tabs using swipe gestures, improving the overall navigation experience. It supports both touch and mouse inputs, enabling intuitive tab switching.
13+
The [`SwipeMode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTab.html#Syncfusion_Blazor_Navigations_SfTab_SwipeMode) property in the Tabs component enables navigation between tabs using swipe gestures, enhancing the overall user experience for both touch and mouse inputs.
1414

15-
However, in certain cases, such as when a tab contains critical elements like a form, accidental swipes can disrupt the user's workflow. For example, if a user is filling out a form and mistakenly swipes, the tab might change unexpectedly, potentially leading to unsaved data or interruptions.
15+
However, in scenarios where a tab contains critical elements, such as a data entry form, accidental swipes can disrupt the user's workflow. An unexpected tab change might lead to unsaved data or interruptions.
16+
17+
To address this, customize the [`SwipeMode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTab.html#Syncfusion_Blazor_Navigations_SfTab_SwipeMode) property based on the application's requirements. This allows balancing intuitive navigation with protecting the user experience and preventing unintended tab switches.
1618

17-
To address this, you can customize the [`SwipeMode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTab.html#Syncfusion_Blazor_Navigations_SfTab_SwipeMode) property based on the needs of the application. By adjusting this setting, you can balance smooth, intuitive navigation with protecting the user experience and safeguarding against accidental tab switches.
1819

1920
The following are the available [`SwipeMode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTab.html#Syncfusion_Blazor_Navigations_SfTab_SwipeMode) options for the Tab component:
2021

@@ -62,4 +63,4 @@ The following are the available [`SwipeMode`](https://help.syncfusion.com/cr/bla
6263
</SfTab>
6364
```
6465

65-
{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLzsrsrTlqFIhjX?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
66+
{% previewsample "https://blazorplayground.syncfusion.com/embed/BtByCNtaJnuYijPR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

‎blazor/tabs/how-to/reorder-active-tab.md‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
---
22
layout: post
3-
title: Reorder Active Tab in Blazor Tabs Component | Syncfusion
3+
title: Prevent Reordering of Active Tab in Blazor Tabs Component | Syncfusion
44
description: Checkout and learn here all about Reorder Active Tab in Syncfusion Blazor Tabs component and much more.
55
platform: Blazor
66
control: Tabs
77
documentation: ug
88
---
99

10-
# Prevent reorder active tab in Blazor Tabs Component
10+
# Prevent Reordering of Active Tab in Blazor Tabs Component
1111

12-
By default, the active tab will reorder when you click the tab items from the popup or resize the browser on popup mode. If we set `false` to [ReorderActiveTab](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTab.html#Syncfusion_Blazor_Navigations_SfTab_ReorderActiveTab) property, the active tab item from the popup will not be reordered and an active item is highlighted inside the popup itself and the content of the selected tab will display. The following code example depicts how to prevent the reorder active tab item inside the popup.
12+
By default, the active tab reorders when a tab item is clicked from the popup or when the browser is resized in popup mode. If the [`ReorderActiveTab`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTab.html#Syncfusion_Blazor_Navigations_SfTab_ReorderActiveTab) property is set to `false`, the active tab item will not reorder. Instead, the active item is highlighted inside the popup itself, and its content is displayed without changing the main tab header order.
13+
14+
The following code example demonstrates how to prevent the active tab item from reordering when clicked from the popup.
1315

1416
```cshtml
1517
@@ -60,3 +62,5 @@ By default, the active tab will reorder when you click the tab items from the po
6062
</TabItems>
6163
</SfTab>
6264
```
65+
66+
{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLeWDjEzmrjKSdD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

‎blazor/tabs/how-to/set-state-persistence-of-the-tab-component.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
---
22
layout: post
3-
title: Set state persistence in Blazor Tabs Component | Syncfusion
3+
title: Set State Persistence in Blazor Tabs Component | Syncfusion
44
description: Checkout and learn here all about how to set state persistence in Syncfusion Blazor Tabs component and more.
55
platform: Blazor
66
control: Tabs
77
documentation: ug
88
---
99

10-
# Set state persistence in Blazor Tabs Component
10+
# Set State Persistence in Blazor Tabs Component
1111

12-
State persistence allows the Tab to retain the current [SelectedItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTab.html#Syncfusion_Blazor_Navigations_SfTab_SelectedItem) property value in the browser cookies for state maintenance. This action is handled through the [EnablePersistence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTab.html#Syncfusion_Blazor_Navigations_SfTab_EnablePersistence) property which is set to false by default. When it is set to true, [SelectedItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTab.html#Syncfusion_Blazor_Navigations_SfTab_SelectedItem) property value of the Tab component will be retained even after refreshing the page.
12+
State persistence allows the Tabs component to retain the value of its [`SelectedItem`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTab.html#Syncfusion_Blazor_Navigations_SfTab_SelectedItem) property in the browser's local storage. This functionality is controlled by the [`EnablePersistence`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTab.html#Syncfusion_Blazor_Navigations_SfTab_EnablePersistence) property, which is `false` by default. When set to `true`, the [SelectedItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTab.html#Syncfusion_Blazor_Navigations_SfTab_SelectedItem) property value of the Tabs component will be retained even after refreshing the page or restarting the browser.
1313

14-
N> Tab **ID** is essential to set state persistence.
14+
N> The `ID` property of the `SfTab` component is essential for state persistence.
1515

1616
```cshtml
1717
@using Syncfusion.Blazor.Navigations

‎blazor/tabs/how-to/show-hide-tab-item.md‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
---
22
layout: post
3-
title: Show/Hide Tab item in Blazor Tabs Component | Syncfusion
3+
title: Show/Hide Tab Item in Blazor Tabs Component | Syncfusion
44
description: Checkout and learn here all about how to show or hide tab item in Syncfusion Blazor Tabs component and much more.
55
platform: Blazor
66
control: Tabs
77
documentation: ug
88
---
99

10-
# Show/Hide Tab item in Blazor Tabs Component
10+
# Show/Hide Tab Item in Blazor Tabs Component
1111

12-
The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TabItem.html#Syncfusion_Blazor_Navigations_TabItem_Visible) property of the Tab item is used to show or hide the item by setting true or false value to the property. In the following demo, specified tab item is show or hide dynamically when the **Show/Hide Item** button is clicked.
12+
The [`Visible`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TabItem.html#Syncfusion_Blazor_Navigations_TabItem_Visible) property of a `TabItem` is used to show or hide the item. Setting it to `true` displays the item, while setting it to `false` hides it.
13+
14+
In the following demo, the first tab item is dynamically shown or hidden when the **Show/Hide Item** button is clicked.
1315

1416
```cshtml
1517
@@ -50,4 +52,6 @@ The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigation
5052
5153
```
5254

55+
{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBIWXXYzQBkNHHR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
56+
5357
![Showing or Hiding TabItem in Blazor Tabs](../images/blazor-tabs-hide-show-tabitem.gif)

0 commit comments

Comments
 (0)