List is a component to build user interface, an instance of Component module. May be associated with mag-data-cacher and stb-component-scrollbar.
npm install mag-component-listAdd the singleton to the scope:
var List = require('mag-component-list');Create list instance:
var list = new List({
cycle: false,
className: 'list',
data: [
'0',
'1',
'2',
'3',
'4'
],
// custom render function
render: function ( $item, config ) {},
// data provider to get visible part from all data, may use mag-data-cacher
provider: dataProvider,
// associated ScrollBar component link, may use stb-component-scrollbar
scroll: new ScrollBar({}),
size: 3,
focusIndex: 0,
propagate: false,
type: List.prototype.TYPE_HORIZONTAL,
events: {
'focus:item': function ( event ) {
console.log(event);
},
'click:item': function ( event ) {
console.log(event);
}
}
});To change data after creation:
list.setData({
focusIndex: 0,
data: [
'Item 0',
'Item 1'
]
});To change focus position by index:
list.focusIndex(index);To change focus item:
list.focusItem($item);To blur item:
list.blurItem($item);To mark item:
list.markItem($item, true);There is a global var
DEVELOPwhich activates additional consistency checks and protection logic not available in release mode.
If you have any problems or suggestions please open an issue according to the contribution rules.
mag-component-list is released under the MIT License.