Tabs - globules-io/OGX.JS GitHub Wiki

Tabs is component to display a list tabs. It supports an unlimited amount of tab as its container is draggable on X to reveal out-of-screen tabs.

Stack

Extends

 Uxi, Touch

OML

Format

  {"selector:Tabs":{CONFIG}}

Create

 let config = {
      el:_SELECTOR_,
      list:_ARRAY_,
      enabled:_BOOLEAN_, //Defaults to true
      add: _BOOLEAN_, //If user can add tabs with + button
      remove: _BOOLEAN_, //If user can remove with drag up or close icon         
      icons:_BOOLEAN_, //Display icons in tabs, defaults to false
      icon_path:_STRING_, //Path to icon folder,
      icon_default:_STRING_, //File name of default icon
      min_width:_NUMBER_, //Min width of tab
      max_width:_NUMBER_, //Max width of tab,
      add_width:_NUMBER_, //Width of the add new tab button
      list:_ARRAY_, //Array of objects   ,
      index:_INT_ //Optional, tab to select
 };

Creating without adding to a Uxi node

 let tabs = OGX.Object.create('Tabs', config);

Creating from a Uxi node

 let tabs = this.create('Tabs', config);

Tabs must respect the following format

  {label:_STRING_, icon:_STRING_, enabled:_BOOL_}

or

  "label"

Note that icon is mandatory is you set icons to true in the config, otherwise, optional.

Methods

 tabs.enable();
 tabs.disable();
 tabs.add(_OBJECT_);
 tabs.addAt(_OBJECT_, _INDEX_);
 tabs.remove(_PROP_, _VALUE_);
 tabs.removeAt(_INDEX_);
 tabs.removeCurrent();
 tabs.enableTab(_INDEX_);
 tabs.disableTab(_INDEX_);
 tabs.select(_TAB_NAME_);
 tabs.val(); //Get object of the current/selected tab
 tabs.index(_INDEX_); //Set or Get index of current/selected tab
 tabs.order(_STRING_, _NUMBER_);

Events

 OGX.Tabs.SELECT
 OGX.Tabs.ADD   
 OGX.Tabs.REMOVE
 OGX.Tabs.REORDER  

Note that since version 1.30.0, SELECT is trigged with an additional object containing the index

Destoy

 tabs.destroy();

Example

 let tabs = OGX.Object.create({
      el:'#tabs', 
      icons:true, 
      icon_path:'/test/img', 
      list:[
           {icon:'file.svg', label:'Globules.io'}, 
           {icon:'file.svg', label:'OGX.JS Framework'}
      ]
 });