Functionality
Overview
TabView displays only one tab at a time and allows switching between the available ones using the dedicated TabBar. Tabs can be equipped with icons or with close buttons. You can disable animation effect or set the desired animation type and direction. This widget is fully responsive and can automatically adjust when a user resizes the window. For example, tabs that don't fit on the screen can move to a popup.
Animation
This widget supports several types of animation effects for tab switching. If needed, you can disable animation at all.
Icons
To help a user find the required tab quicker, you can add an icon to each tab. Webix uses icons from the Font Awesome collection, and there's plenty of icons to choose from.
Closable tabs
It is possible to define which tabs will be closable by using a special configuration property. Users will be able to close a particular tab by clicking a 'cross' button on the related tabbar segment.
Responsiveness
When the window is minimized, tabs also shrink to their minimal width. The tabs that don't fit on the screen are pushed to a popup list. In this case, an ellipsis icon is displayed at the right side of the Tabbar, and users can get access to the drop-down list of the available tabs by clicking on it. Webix allows you to adjust the minimal width of tabs or popup as well as set the number of items in the popup.
Adjusting tabs size
You can set the height of each TabView tab. If tabs have different heights, Tabview will take the height of the tab that is active at the moment. You can change this default behavior so that cells will fit the size of the biggest cell.
Adding and removing tabs dynamically
Webix provides API that allows adding or removing TabView cells dynamically, so you can allow end users to add or delete tabs with a single mouse click.