tabbarPopup

custom popup for responsive tabbar

Example

webix.ui({
  view:"tabbar",
  options: [/* options */],
  tabbarPopup:{
    body:{
      yCount:10,
    }
  }
});

Related samples

The property allows you to fine tune tabbar popup, the window itself and a list inside.

Popup configuration

You can provide settings for tabbar popup inside the tabbarPopup object:

webix.ui({
  view:"tabbar",
  options: [/* options */],
  tabbarPopup:{
    width: 200,
    // custom styles for popup
    css: "myCSS",
    // config for inner list
    body: {
      yCount: 10,
      template: "#value#"
    }
  }
});

Basically, you can provide any settings valid for popup or list inside the tabbarPopup object.

Using predefined popup

tabbarPopup can take a predefined popup (its ID or view itself) as a value:

// create popup view
webix.ui({
  id:"win",
  view:"popup",
  body:{
    view:"list",
    // you also have to define click handlers
  }
});
 
const tabbar = {
  view:"tabbar",
  tabMinWidth:200,
  options: [/* options */],
  // point to the created popup
  tabbarPopup: "win" // or $$("win")

Back to top