TabView UI widget

TabView is a combination of two widgets: MultiView and TabBar. The widget will be helpful if you want to place several widgets on the same page, but there isn't enough screen space.

live demo

  • Integration: jQuery, Angular, React, Vue.js, Backbone
  • Support of All Modern browsers
  • Ready for Touch Devices
  • Meets Section 508
  • Quick styling with CSS

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.