syncfusion-blazor-tabs

# Implementing Syncfusion Blazor Tabs Component ## When to Use This Skill Use the Syncfusion Blazor Tabs component when you need to: - Organize content into multiple sections with tab-based navigation - Create tabbed interfaces for content organization and switching - Handle programmatic and user-driven tab selection - Dynamically add, remove, or manage tab items - Implement vertical or horizontal tab layouts - Build responsive tab interfaces that adapt to different screen sizes - Create nested tab structures for hierarchical content organization - Customize tab appearance, styling, and animations - Implement multi-step wizards with conditional navigation - Enable drag-and-drop for tab reordering - Persist tab state across page refreshes ## Component Overview The Syncfusion Blazor Tabs component (`SfTab`) provides a flexible, accessible, and feature-rich tabbed navigation interface with support for: - Multiple tab items with customizable headers and content - Dynamic tab management (add/remove items programmatically) - Multiple header placements (Top, Bottom, Left, Right) - Responsive overflow modes (Scrollable, Popup) - Two-way binding with `SelectedItem` property - Comprehensive event system for user interactions - Content rendering modes (Dynamic, On-Demand, Initial) - Rich templating with `ContentTemplate` and `HeaderTemplate` - Animation support with multiple effects - State persistence through browser cookies - Full keyboard and screen reader accessibility - Drag-and-drop support for tab reordering ### Key Components - **SfTab**: Main container component managing all tabs - **TabItems**: Collection container for tab items - **TabItem**: Individual tab with header and content - **TabHeader**: Header configuration for tab title, icons, and positioning - **TabEvents**: Event handlers for tab interactions - **TabAnimationSettings**: Animation configuration for tab transitions - **ContentTemplate**: Template for rendering complex content - **HeaderTemplate**: Template for custom header rendering --- ## Installation and Setup ### Prerequisites - .NET 6.0 or higher - Blazor WebAssembly or Blazor Server application ### NuGet Package Installation ```csharp // Install via Package Manager Console Install-Package Syncfusion.Blazor.Navigations Install-Package Syncfusion.Blazor.Themes ``` Or via .NET CLI: ```bash dotnet add package Syncfusion.Blazor.Navigations dotnet add package Syncfusion.Blazor.Themes ``` ### Register Syncfusion Blazor Service In **Program.cs**: ```csharp using Syncfusion.Blazor; var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.RootComponents.Add<App>("#app"); builder.Services.AddSyncfusionBlazor(); await builder.Build().RunAsync(); ``` ### Add Namespaces In **_Imports.razor**: ```csharp @using Syncfusion.Blazor @using Syncfusion.Blazor.Navigations ``` ### Add Theme and Script References In **index.html** (in `<head>` section): ```html <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" /> <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script> ``` --- ## Basic Implementation ### Minimal Blazor Tabs Component Setup ```razor @using Syncfusion.Blazor.Navigations <SfTab> <TabItems> <TabItem> <ChildContent> <TabHeader Text="Tab 1"></TabHeader> </ChildContent> <ContentTemplate> <div>Content for Tab 1</div> </ContentTemplate> </TabItem> <TabItem> <ChildContent> <TabHeader Text="Tab 2"></TabHeader> </ChildContent> <ContentTemplate> <div>Content for Tab 2</div> </ContentTemplate> </TabItem> <TabItem> <ChildContent> <TabHeader Text="Tab 3"></TabHeader> </ChildContent> <ContentTemplate> <div>Content for Tab 3</div> </ContentTemplate> </TabItem> </TabItems> </SfTab> ``` --- ## Core API Reference ### SfTab Component Properties | Property | Type | Default | Description | Example | |----------|------|---------|-------------|---------| | `AllowDragAndDrop` | bool | false | Enables drag-and-drop reordering of tabs | `AllowDragAndDrop="true"` | | `CssClass` | string | null | CSS class applied to the Tab container | `CssClass="e-fill"` | | `DragArea` | string | null | Sets the area to move the draggable element; dragging is restricted outside this area | `DragArea="body"` | | `EnablePersistence` | bool | false | Enables state persistence in browser cookies | `EnablePersistence="true"` | | `Height` | string | null | Height of the Tab component | `Height="250px"` | | `HeaderPlacement` | HeaderPosition | Top | Position of tab headers (Top, Bottom, Left, Right) | `HeaderPlacement="HeaderPosition.Left"` | | `ID` | string | null | Unique identifier for the component (required for persistence) | `ID="myTabs"` | | `LoadOn` | ContentLoad | Dynamic | Content rendering mode (Dynamic, Demand, Init) | `LoadOn="ContentLoad.Demand"` | | `OverflowMode` | OverflowMode | Scrollable | Behavior for overflowed tabs (Scrollable, Popup) | `OverflowMode="OverflowMode.Popup"` | | `ReorderActiveTab` | bool | true | Reorders active tab when clicking from popup | `ReorderActiveTab="false"` | | `ScrollStep` | int | 0 | Number of pixels to scroll when clicking navigation arrows | `ScrollStep="150"` | | `SelectedItem` | int | 0 | Index of currently selected tab (supports two-way binding) | `@bind-SelectedItem="tabIndex"` | | `ShowCloseButton` | bool | false | Shows close button on tab headers | `ShowCloseButton="true"` | | `SwipeMode` | TabSwipeMode | TabSwipeMode.Touch \| TabSwipeMode.Mouse | Enables swipe gestures for tab navigation | `SwipeMode="TabSwipeMode.Touch"` | | `Width` | string | null | Width of the Tab component | `Width="500px"` | | `Locale` | string | "en-US" | Sets the locale for localization support | `Locale="fr-FR"` | | `ShouldReinitialize` | bool | false | Gets or sets a value that indicates whether to re-initialize the tab content on every TabItem initialization | `ShouldReinitialize="true"` | #### Property Examples **Setting HeaderPlacement to create vertical tabs:** ```razor <SfTab HeaderPlacement="HeaderPosition.Left" Height="250px" Width="500px"> <TabItems> <!-- Tab items --> </TabItems> </SfTab> ``` **Enabling drag-and-drop for tab reordering:** ```razor <SfTab AllowDragAndDrop="true"> <TabItems> <!-- Tab items --> </TabItems> </SfTab> ``` **Restricting drag area with DragArea property:** ```razor <div id="dragContainer" style="border: 2px solid blue; padding: 10px;"> <SfTab AllowDragAndDrop="true" DragArea="#dragContainer"> <TabItems> <TabItem> <ChildContent> <TabHeader Text="Tab 1"></TabHeader> </ChildContent> <ContentTemplate>Tab 1 content</ContentTemplate> </TabItem> <TabItem> <ChildContent> <TabHeader Text="Tab 2"></TabHeader> </ChildContent> <ContentTemplate>Tab 2 content</ContentTemplate> </TabItem> <TabItem> <ChildContent> <TabHeader Text="Tab 3"></TabHeader> </ChildContent> <ContentTemplate>Tab 3 content</ContentTemplate> </TabItem> </TabItems> </SfTab> </div> ``` **Two-way binding with SelectedItem:** ```razor <SfNumericTextBox @bind-Value="SelectedTabIndex" Min="0" Max="4"></SfNumericTextBox> <SfTab @bind-SelectedItem="SelectedTabIndex"> <TabItems> <!-- Tab items --> </TabItems> </SfTab> @code { private int SelectedTabIndex = 0; } ``` **Enabling state persistence:** ```razor <SfTab ID="PersistentTabs" EnablePersistence="true"> <TabItems> <!-- Tab items --> </TabItems> </SfTab> ``` **Customizing scroll step for scrollable mode:** ```razor <SfTab Width="400px" OverflowMode="OverflowMode.Scrollable" ScrollStep="150"> <TabItems> <!-- Tab items --> </TabItems> </SfTab> ``` **Disabling swipe gestures:** ```razor <SfTab SwipeMode="~TabSwipeMode.Touch & ~TabSwipeMode.Mouse"> <TabItems> <!-- Tab items --> </TabItems> </SfTab> ``` **Setting locale for localization:** ```razor <SfTab Locale="fr-FR"> <TabItems> <TabItem Content="Onglet 1"> <ChildContent> <TabHeader Text="Tab 1"></TabHeader> </ChildContent> </TabItem> </TabItems> </SfTab> ``` **Using ShouldReinitialize to re-initialize tab content on every TabItem initialization:** ```razor @using Syncfusion.Blazor.Navigations @using Syncfusion.Blazor.Buttons <SfButton @onclick="ToggleReinitialize">Toggle Re-initialization</SfButton> <p>Re-initialize: @shouldReinitialize</p> <SfTab ShouldReinitialize="@shouldReinitialize"> <TabItems> <TabItem> <ChildContent> <TabHeader Text="Tab 1"></TabHeader> </ChildContent> <ContentTemplate> <div> <p>Content loaded at: @DateTime.Now.ToString("HH:mm:ss.fff")</p> <p>This content reloads every time ShouldReinitialize is triggered</p> </div> </ContentTemplate> </TabItem> <TabItem> <ChildContent> <TabHeader Text="Tab 2"></TabHeader> </ChildContent> <ContentTemplate> <div> <p>Content loaded at: @DateTime.Now.ToString("HH:mm:ss.fff")</p> <p>This content reloads every time ShouldReinitialize is triggered</p> </div> </ContentTemplate> </TabItem> </TabItems> </SfTab> @code { private bool shouldReinitialize = false; private async Task ToggleReinitialize() { shouldReinitialize = !shouldReinitialize; await Task.Delay(500); shouldReinitialize = !shouldReinitialize; } } ``` --- ### TabItems Collection Properties | Property | Type | Default | Description | Example | |----------|------|---------|-------------|---------| | `Items` | List<TabItem> | Empty | Gets or sets the list of tab items to be rendered in the tab panel | `Items="@tabItems"` | #### TabItems Property Examples **Using Items property to bind tab items from a list:** ```razor @using Syncfusion.Blazor.Navigations <SfButton @onclick="AddTab">Add Tab</SfButton> <SfButton @onclick="RemoveTab">Remove Tab</SfButton> <SfTab> <TabItems Items="@TabItems"> </TabItems> </SfTab> @code { private List<TabItem> TabItems = new List<TabItem>(); protected override void OnInitialized() { TabItems = new List<TabItem> { new TabItem { Header = new TabHeader { Text = "HTML" }, Content = "HTML is the standard markup language" }, new TabItem { Header = new TabHeader { Text = "CSS" }, Content = "CSS is used for styling web pages" }, new TabItem { Header = new TabHeader { Text = "JavaScript" }, Content = "JavaScript is a programming language" } }; } private void AddTab() { TabItems.Add(new TabItem { Header = new TabHeader { Text = $"New Tab {TabItems.Count + 1}" }, Content = "New tab content" }); } private void RemoveTab() { if (TabItems.Count > 0) TabItems.RemoveAt(TabItems.Count - 1); } } ``` --- ### TabItem Component Properties | Property | Type | Default | Description | Example | |----------|------|---------|-------------|---------| | `Content` | string | null | Simple string content for the tab | `Content="Tab content text"` | | `ContentTemplate` | RenderFragment | null | Template for rendering complex content | `<ContentTemplate>...</ContentTemplate>` |