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 theindex
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'}
]
});