NEW VERSION RELEASED! Webix 11 Read More Core Updates, Extended Functionalities in SpreadSheet and File Manager and more

JavaScript MultiView UI widget

The Webix MultiView widget helps efficiently use space on a web page. With this Webix widget, there is no need to open additional browser windows. Now you can place different widgets into separate tabs that will be located within one area, but only one of them will be shown at a time.

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

MultiView displays one tab, or view, at a time. You can switch between the available tabs using the dedicated buttons. Switching occurs with an animation effect. You can set the animation type or disable it at all.

Container for other widgets

You can place any Webix widget inside the MultiView. For instance, JavaScript Calendar can be put in the first tab while JavaScript Carousel will appear in the second one and so on. Users can quickly switch between these panels using the navigation tools.

Switching between views

You can quickly switch between views within the MultiView by using library controls with built-in switching functionality, tabview features, or special functions.

Sizing

The dimensions of MultiView tabs are adjusted to their content. The widget takes the size of the smallest tab by default.

Animation

You can easily manage MultiView animation during views changing and adjust the desired animation type thanks to the rich widget API.

Saving inactive views

Multiview removes inactive views from DOM when they become hidden, and sometimes data can be lost, e.g. in case of WYSIWYG editors. You can change this default behavior and preserve hidden views by enabling the corresponding configuration option.