List component
List is a component to build user interface, an instance of Component module. May be associated with mag-data-cacher and stb-component-scrollbar.
Installation
npm install mag-component-list
Usage
Add 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);
Development mode
There is a global var
DEVELOP
which activates additional consistency checks and protection logic not available in release mode.
Contribution
If you have any problems or suggestions please open an issue according to the contribution rules.
License
mag-component-list
is released under the MIT License.