The tab control is a content panel that displays multiple pieces of content in a specific space, one at a time. Each piece of content is associated with its corresponding header.
A tab can be rendered based on a JSON array collection of properties such as header and content. Data binding can be achieved by forming an array collection of items.
A tab can also be rendered with the given HTML elements. HTML markup can be formed based on templating elements using the template engine.
The tab control adapts to the available space in two types of display modes: scrollable tab and popup menu.
Scrollable display mode displays the tab header items in a single line with horizontal scrolling enabled, when the items overflow to the available space. You can swipe over the tab header area to scroll.
The popup menu is another type of overflow mode in which the tab container holds the items that can be placed within the available space. The items that do not fit the viewing area are moved to the overflow popup container. You can view the overflow tab headers by clicking the popup icon.
Allows you to add nested levels of tab within the parent tab.
Tab headers can be customized with CSS.
Tab headers can be positioned either at the top or bottom.
Tab items can be removed dynamically using the close button. You can also control which tab item needs to have a close button and restrict it for certain tabs using custom classes.
You can have icons with text or only icons in the tab header according to your preference. The position of the icons can also be changed to the left, right, top, and bottom.
Tab content is loaded on-demand while selecting tab header, resulting in fast initial loading. Tab content already loaded will persist after moving to the next tab to prevent loading the content repeatedly.
Allows you to load external content for tab content using an AJAX library.
The tab content height can be defined based on the tallest panel height, parent height, or with the given content. This can be set by specifying the height adjust mode as “auto,” “fill,” and “content.”
Supports different types of built-in animation for the next/previous tab navigation. Animation behavior can also be customized.
During browser navigation, the selected state of the tab will not be lost.
Developers can control the appearance and behavior of the tab control using a rich set of APIs.