| name | syncfusion-aspnetcore-tabs |
| description | Implement tabbed navigation interfaces in ASP.NET Core using Syncfusion Tab component for organizing and switching between content sections. Use this skill when implementing tab-based navigation, multi-panel content organization, wizards, or any scenario requiring organized content sections with header-based selection. |
| metadata | {"author":"Syncfusion Inc","version":"34.1.29"} |
Implementing Syncfusion Core Tabs
The Syncfusion Tab component provides a navigation control for organizing content into separate, selectable tabs. Each tab consists of a header and associated content that appears when the tab is selected.
When to Use This Skill
- Organizing related content into logical sections with tab navigation
- Creating wizard interfaces with step-by-step progression
- Building collapsible accordion-like interfaces
- Implementing drag-and-drop reorderable tab items
- Setting up stateful tab selection with persistence
- Customizing header styles, positions, and animations
- Loading content dynamically or from external sources
Component Overview
Key Features:
- HeaderPlacement: Top, Bottom, Left, or Right positioning
- Content loading modes: Init (all), Demand (lazy-load), Dynamic (replace)
- Drag-and-drop reordering with event callbacks
- Animation configuration for smooth transitions
- RTL support and localization
- State persistence across page reloads
- Keyboard navigation (Tab key support)
- Height management: None, Auto, Content, or Fill
Core Properties:
items: Array of TabItem objects defining headers and contentselectedItem: Index of the active tabheightAdjustMode: Controls content panel height behaviorallowDragAndDrop: Enable/disable drag reorderingheaderPlacement: Position of tab headersenablePersistence: Save/restore selected tab on reloadloadOn: Content loading strategy (Init/Demand/Dynamic)
Documentation and Navigation Guide
Getting Started
📄 Read: references/getting-started.md
- NuGet package installation and setup
- Tag Helper configuration
- CSS/script references (CDN and NPM)
- Basic Tab initialization with TagHelper
- JSON items collection vs HTML element binding
Tab Configuration and Content
📄 Read: references/tab-content-rendering.md
- Tab header structure and customization
- Content rendering modes (HTML, Partial View, External POST, Templates)
- Dynamic content loading and population
- Content templates and inline rendering
Tab Interaction Features
📄 Read: references/tab-interaction.md
- Tab selection programmatically and via user interaction
- Click handlers and selection events
- Keyboard navigation with Tab key support
- Drag-and-drop reordering between tabs
- Nested tabs and hierarchical structures
Styling and Layout
📄 Read: references/styling-layout.md
- CSS class customization (e-fill, e-background, e-accent)
- Tab height and content height adjustment modes
- Horizontal scrolling and popup overflow modes
- Header icon positioning and orientations
- Responsive design patterns
Advanced Features
📄 Read: references/advanced-features.md
- State persistence configuration
- Localization and internationalization
- RTL (right-to-left) support
- Animation customization (previous/next effects)
- Collapsible tabs and wizard patterns
- API methods for programmatic control
API Reference
📄 Read: references/api-reference.md
- Complete API documentation
- All properties with types and defaults
- Event signatures and parameters
- Methods for runtime manipulation
Quick Start Example
Basic Tab with three items using TagHelper syntax:
@using Syncfusion.EJ2.Navigations;
<ejs-tab id="ej2Tab">
<e-tab-tabitems>
<e-tab-tabitem header="@(new TabHeader { Text = "Home" })" content="Welcome to home tab"></e-tab-tabitem>
<e-tab-tabitem header="@(new TabHeader { Text = "Profile" })" content="Your profile information"></e-tab-tabitem>
<e-tab-tabitem header="@(new TabHeader { Text = "Settings" })" content="Adjust your settings"></e-tab-tabitem>
</e-tab-tabitems>
</ejs-tab>
Common Patterns
Lazy-Loading Content (Demand Mode)
<ejs-tab id="ej2Tab" loadOn="ContentLoad.Demand">
<e-tab-tabitems>
<e-tab-tabitem header="@(new TabHeader { Text = "Tab1" })" content="Content loads on demand"></e-tab-tabitem>
<e-tab-tabitem header="@(new TabHeader { Text = "Tab2" })" content="Second tab content"></e-tab-tabitem>
</e-tab-tabitems>
</ejs-tab>
Dynamic Content Only (Dynamic Mode)
<ejs-tab id="ej2Tab" loadOn="ContentLoad.Dynamic">
<!-- Only the selected tab's content is in DOM -->
</ejs-tab>
Drag-and-Drop Reordering
<ejs-tab id="ej2Tab" allowDragAndDrop="true">
<!-- Tab items can be dragged and reordered -->
</ejs-tab>
Header Positioning (Vertical Navigation)
<ejs-tab id="ej2Tab" headerPlacement="@HeaderPosition.Left">
<!-- Headers appear on the left side -->
</ejs-tab>
Height Management
<ejs-tab id="ej2Tab" heightAdjustMode="@HeightStyles.Auto">
<!-- Content height auto-adjusts to tallest panel -->
</ejs-tab>
State Persistence
<ejs-tab id="ej2Tab" enablePersistence="true" selectedItem="1">
<!-- Selected tab index is saved and restored across page loads -->
</ejs-tab>
Key Events
| Event | Trigger | Use Case |
|---|
selecting | Before tab selection | Validate tab change or prevent selection |
selected | After tab selection | Perform actions on tab switch, detect user vs programmatic selection |
adding | Before adding tab item | Validate new item before insertion |
added | After adding tab item | Update UI after new tab is added |
removing | Before removing tab item | Confirm deletion or cleanup data |
removed | After removing tab item | Update state after removal |
onDragStart | Before drag operation | Prevent dragging specific items |
dragging | During drag operation | Provide visual feedback |
dragged | After drop operation | Update data or move to external source |
created | Component initialized | Initialize related controls |
destroyed | Component destroyed | Clean up resources |
Integration Checklist
Next Steps: Review the specific reference files based on your feature requirements. Start with getting-started.md for basic setup, then explore advanced features and API reference as needed.
