| Name | Type | Default | Description |
|---|
| AddNewTab | bool | false | Determines whether the "Add new tab" button (typically represented by a plus sign "+") is visible in the user interface. When set to true, the button is displayed, allowing users to add new tabs; when set to false, the button is hidden. This property can be used to both retrieve the current visibility status or control the display of the button. |
| AllowToggle | bool | false | Enables toggle functionality for tab selection. When set to true, the selectedIndex property can be assigned a value of null, indicating that no tab is currently selected. This allows users to deselect any active tab, leaving the tab interface with no selected tab. |
| CloseButtonMode | TabsCloseButtonMode | TabsCloseButtonMode.Default | Configures or retrieves the display mode of the close button. This property determines how the close button appears or behaves within the user interface, such as being always visible, visible on hover, or hidden. |
| CloseButtons | bool | false | Controls whether close buttons are shown in the user interface. Setting this property to true will display close buttons; setting it to false will hide them. You can also retrieve the current state to determine if close buttons are visible. |
| IsCollapsed | bool | false | Determines whether the content section of the Tabs component is expanded or collapsed. When set to 'true', the content section is hidden (collapsed); when set to 'false', the content is visible (expanded). This property can be used to programmatically control or retrieve the collapsed state of the Tabs content. |
| Collapsible | bool | false | Controls whether the collapsible functionality is active, allowing content sections to expand or collapse when enabled. When disabled, all content sections remain fully expanded and cannot be collapsed. |
| DataSource | IEnumerable<object> | N/A | Specifies the data source from which the content for each tab will be retrieved and displayed. This property defines what data will populate the individual tabs when the Tabs component is rendered. |
| Disabled | bool | false | Determines whether the element is interactive or inactive. When enabled, users can interact with the element; when disabled, the element becomes non-interactive and typically appears visually muted to indicate its inactive state. |
| EnableMouseWheelAction | bool | false | Allows users to scroll horizontally through tab labels in the tab strip using the mouse wheel when the tabs exceed the visible area (i.e., when the tab strip overflows). Enabling this option lets users navigate through hidden tabs by scrolling, while disabling it prevents mouse wheel scrolling in the tab strip. |
| UnlockKey | string | "" | Sets or retrieves the 'unlockKey' value, a unique key or code required to unlock and gain access to the product’s features or content. |
| Locale | string | "en" | Specifies or retrieves the current locale setting, which determines language and regional formatting. This property works together with the messages property to display localized content or translations based on the selected locale. |
| Messages | object | N/A | Sets or retrieves an object containing key-value pairs of strings used throughout the widget’s interface. These strings can be customized for different languages, enabling localization of the widget’s text content. This property is typically used alongside the locale property to display the widget’s labels, messages, and prompts in the selected language. |
| Name | string | "" | Gets the current name of the widget, or assigns a new name to the widget when provided a value. The name uniquely identifies the widget instance within the application. |
| Overflow | Overflow | Overflow.Auto | Specifies or retrieves the behavior of the scroll buttons for the Tabs component. This property is relevant only when the tabLayout is set to 'scroll', allowing navigation through tab items that exceed the visible area. Use this option to control how scroll buttons appear and function when there are more tabs than can be displayed at once. |
| Readonly | bool | false | Prevents all user interactions with the element, making it unresponsive to mouse, keyboard, and touch events such as clicking, dragging, or typing. This means the element cannot be activated, focused, or interacted with in any way by the user. |
| Reorder | bool | false | Controls whether the tab reordering feature is enabled or disabled. When enabled, users can rearrange the tabs by dragging a tab and dropping it onto a new position within the tab list. This allows for dynamic reordering of tabs based on the user's preference. When disabled, tabs remain in their original order and cannot be moved by the user. |
| Resize | bool | false | Determines whether users can resize tab labels by clicking and dragging them with the mouse. When enabled, this allows tab labels to be adjusted interactively by the user. When disabled, tab label sizes remain fixed and cannot be changed through mouse actions. This setting can be used to either retrieve the current resizability state or update it. |
| RightToLeft | bool | false | Gets or sets a value that determines whether the element’s text direction is set to right-to-left (RTL) alignment, ensuring proper display and support for languages and locales that read from right to left, such as Arabic or Hebrew. |
| ScrollButtonsPosition | LayoutPosition | LayoutPosition.Both | Configures or retrieves the position of the scroll buttons within the component, allowing you to specify where the scroll controls appear (for example, at the start, end, or both ends of the scrollable area). This property enables precise placement of navigation controls for improved user experience. |
| ScrollMode | TabsScrollMode | TabsScrollMode.Paging | Specifies or retrieves how the tab strip responds when users interact with the scroll buttons. Determines the scrolling behavior—such as the distance the tab strip moves or whether scrolling is smooth or immediate—when the left or right scroll buttons are clicked. |
| SelectedIndex | int? | N/A | Gets the index or identifier of the currently selected tab, or allows you to specify which tab should be selected. |
| SelectionMode | TabSelectionMode | TabSelectionMode.Click | Specifies how users can navigate or switch between different tabs, such as by clicking, keyboard shortcuts, or swipe gestures. This setting defines the interaction method for moving from one tab to another within the tabbed interface. |
| TabLayout | TabsTabLayout | TabsTabLayout.Scroll | Determines how the component handles situations where the element’s width is insufficient to display all tab labels. Offers four configurable behaviors for managing tab overflow, such as scrolling, collapsing, fading, or displaying an overflow menu. |
| TabPosition | TabPosition | TabPosition.Top | Specifies or retrieves the position of the tab strip within the user interface, determining where the tab strip is displayed (e.g., top, bottom, left, or right) relative to the main content area. |
| TabTextOrientation | Orientation | Orientation.Horizontal | Specifies or retrieves the direction in which the text is displayed within the tabs, such as horizontal or vertical orientation. This property allows you to control whether tab labels are arranged from left to right, top to bottom, or in another supported direction. |
| Theme | string | "" | Specifies the theme to be applied, which controls the visual style, color scheme, and overall appearance of the element. The selected theme determines how the element is displayed to users. |
| Unfocusable | bool | false | When set to true, this property prevents the element from receiving keyboard focus, making it impossible for users to interact with it using tab navigation or other focus-related actions. |
| Name | Type | Arguments | Description |
|---|
| Collapse | void | N/A | Expands or collapses the content section, allowing users to toggle the visibility of its contents for improved usability and a cleaner interface. |
| EnsureVisible | void | int index | Ensures the specified tab is brought into view within its container by automatically scrolling the container so that the entire tab is visible to the user.Args: int index - The index of the tab to scroll to. |
| Expand | void | N/A | Expands the content section to reveal additional information or elements that are initially hidden, providing users with more detailed content or options within this area. |
| GetDataSourceAsync() | Task<IEnumerable<object>> | 'N/A' | Gets the "DataSource" property as Task<IEnumerable<object>>. |
| GetIsCollapsedAsync() | Task<bool> | 'N/A' | Gets the "IsCollapsed" property as Task<bool>. |
| GetOffsetFromEdgeOfElement | int | int index | Returns the distance, in pixels, between the edge of the tab item container (the smart-tab-item element) and the corresponding edge of the parent smart-tabs element where the tab strip is located. This offset indicates how far the tab item container is positioned from the start of the tab strip within the tabs component, allowing for precise alignment and positioning calculations.Args: int index - The index of the tab item. |
| GetSelectedIndexAsync() | Task<int?> | 'N/A' | Gets the "SelectedIndex" property as Task<int?>. |
| GetTabContent | object | int index | Retrieves and returns the content associated with the Tab located at the specified index within the Tab component. This allows access to the data or elements currently displayed in the selected Tab.Args: int index - The index of the tab. |
| GetTabLabel | string | int index | Retrieves the label (displayed title) of the Tab located at the specified index within the Tab collection. The index parameter is zero-based, meaning 0 refers to the first Tab.Args: int index - The index of the tab. |
| GetTabs | IEnumerable<object> | N/A | Returns an array containing all TabItem objects that are child elements of the specified element. Each TabItem in the array represents a tab within the tabbed interface, allowing you to programmatically access and manipulate individual tabs. |
| Insert | void | int index, object details | Adds a new tab to the tab navigation interface and creates a corresponding content section. The new tab becomes selectable, allowing users to view and interact with its associated content when it is active.Args: int index - The index to insert a new tab at.,object details - An Object with the fields "label", "labelSize", "content" and "group". |
| Refresh | void | 'N/A' | Refreshes the Blazor Component. Performs a layout of the HTML Elements and recalculates the measurements. |
| RefreshTabHeader | void | N/A | Refreshes the Tabs header section to ensure it displays correctly. This is particularly useful when the header contains elements—such as images or dynamic content—that may load after the initial rendering of the Tabs. By calling this function, you can re-render or update the header layout to accommodate any late-loaded or dynamically updated elements, ensuring alignment and visual consistency. |
| RemoveAt | void | int index | Removes the specified tab along with its corresponding content section from the user interface, ensuring that both the tab header and its related content are deleted and no longer accessible to the user.Args: int index - The index of the tab to remove. |
| Render | void | 'N/A' | Re-renders the Blazor Component. This method will make a full re-render. |
| Select | void | int index | Programmatically activates the specified tab in a tabbed interface, making its associated content visible while hiding content from other tabs.Args: int index - The index of the tab to select. |
| StateHasChanged | void | 'N/A' | Refreshes the state and Re-renders the Blazor Component, if necessary. |
| Update | void | int index, string label, string content | Updates a specific tab along with its corresponding content section, ensuring that both the tab interface and its related content are synchronized and reflect the latest changes.Args: int index - The index of the tab to update.,string label - The new label of the tab. The value can be the id of an HTMLTemplateElement,string content - The new content of the tab. |
| Name | Type | Description | Event Detail |
|---|
| OnAddNewTabClick | EventCallback<Event> | This event is triggered when the addNewTab feature is enabled and the corresponding button or interface element is clicked by the user. | N/A |
| AddNewTabClicked | event TabsAddNewTabClickedEventHandler | This event is triggered when the addNewTab feature is enabled and the corresponding button or interface element is clicked by the user. | TabsAddNewTabClickedEventArgs |
| OnChange | EventCallback<Event> | This event is triggered whenever the user selects a different tab, indicating that the active tab has changed. It allows you to respond to tab selection changes, such as updating content or executing specific logic based on the newly selected tab. | int index- The tab's index., int oldIndex- The tab's old index. |
| Changed | event TabsChangedEventHandler | This event is triggered whenever the user selects a different tab, indicating that the active tab has changed. It allows you to respond to tab selection changes, such as updating content or executing specific logic based on the newly selected tab. | TabsChangedEventArgs |
| OnClose | EventCallback<Event> | This event is triggered whenever a user closes a browser tab. It allows you to execute custom actions or clean up resources associated with that tab right before it is removed from the browser. The event provides details about the closed tab, such as its identifier and any relevant data, enabling you to manage your application's state accordingly. | int index- The tab's index. |
| Closed | event TabsClosedEventHandler | This event is triggered whenever a user closes a browser tab. It allows you to execute custom actions or clean up resources associated with that tab right before it is removed from the browser. The event provides details about the closed tab, such as its identifier and any relevant data, enabling you to manage your application's state accordingly. | TabsClosedEventArgs |
| OnClosing | EventCallback<Event> | This event is dispatched immediately before a tab is closed, giving you an opportunity to intercept the closure. By calling event.preventDefault() within the event handler, you can cancel the default close action and prevent the tab from closing. This allows you to perform actions such as prompting the user to save changes or confirming the close operation before proceeding. | int index- The tab's index. |
| Closing | event TabsClosingEventHandler | This event is dispatched immediately before a tab is closed, giving you an opportunity to intercept the closure. By calling event.preventDefault() within the event handler, you can cancel the default close action and prevent the tab from closing. This allows you to perform actions such as prompting the user to save changes or confirming the close operation before proceeding. | TabsClosingEventArgs |
| OnDragEnd | EventCallback<Event> | This event is triggered when a user completes a drag operation, signaling that the dragged element has been released and the drag sequence has finished. It allows you to perform cleanup actions, update UI elements, or handle any final logic after dragging is concluded. | int left- The tab's left position., int top- The tab's top position., int index- The tab's index., string label- The tab's label. |
| DragEnded | event TabsDragEndedEventHandler | This event is triggered when a user completes a drag operation, signaling that the dragged element has been released and the drag sequence has finished. It allows you to perform cleanup actions, update UI elements, or handle any final logic after dragging is concluded. | TabsDragEndedEventArgs |
| OnDragStart | EventCallback<Event> | This event is fired when a user initiates a drag operation, typically by clicking and beginning to move a draggable element. It marks the beginning of the drag-and-drop sequence, allowing you to set up any necessary data or visual feedback for the dragged item. | int left- The tab's left position., int top- The tab's top position., int index- The tab's index., string label- The tab's label. |
| DragStarted | event TabsDragStartedEventHandler | This event is fired when a user initiates a drag operation, typically by clicking and beginning to move a draggable element. It marks the beginning of the drag-and-drop sequence, allowing you to set up any necessary data or visual feedback for the dragged item. | TabsDragStartedEventArgs |
| OnReorder | EventCallback<Event> | This event is triggered whenever the order of tabs within a tab group changes, such as when a user drags and drops a tab to a new position. It allows you to respond to tab reordering actions, enabling features like updating your application's state or saving the new tab arrangement. | int index- The tab's index., int oldIndex- The tab's old index. |
| Reordered | event TabsReorderedEventHandler | This event is triggered whenever the order of tabs within a tab group changes, such as when a user drags and drops a tab to a new position. It allows you to respond to tab reordering actions, enabling features like updating your application's state or saving the new tab arrangement. | TabsReorderedEventArgs |