Layout list is a component to build user interface, an instance of Component module. It is based on mag-component-list and mag-component-layout.
npm install mag-component-layout-list
Add the singleton to the scope:
var LayoutList = require('mag-component-layout-list');
Create layout list instance:
var layoutList = new LayoutList({
// mag-component-list config
cycle: false,
className: 'list',
data: [
{
// mag-component-layout config.data
items: [
new Button({value: 'Ok'}),
new Button({value: 'Cancel'}),
new Button({value: 'Exit'})
]
},
{
// mag-component-layout config.data
items: [
HTMLElement1,
HTMLElement2
],
value: someItemData2
},
{
items: [
{
className: 'star',
name: '$icon'
},
{
value: 'Some text',
name: '$text'
}
],
click: function () {
// do something
},
name: 'starItem'
},
{
items: [
'Hello world',
{
value: 'hi',
className: 'status'
}
],
value:{
uri: 'http://55.55.55.55/some'
},
click: someHandler
}
],
// custom render function
render: function ( $item, config ) {},
noData: 'No items',
fixedData: true,
size: 3,
focusIndex: 0,
propagate: false,
type: LayoutList.prototype.TYPE_HORIZONTAL,
events: {
'focus:item': function ( event ) {
console.log(event);
},
'click:item': function ( event ) {
console.log(event);
}
}
});
layoutList.links.starItem.links.$text.innerText = 'new cool text';
To change data after creation:
layoutList.setData({
focusIndex: 0,
data: [
{
items: [
{
className: 'star'
},
'Some text'
],
click: function () {
// do something
}
},
{
items: [
'Hello world',
{
value: 'hi',
className: 'status'
}
],
value:{
uri: 'http://55.55.55.55/some'
},
click: someHandler
},
{
items: [
{
className: 'big',
value: ' Some'
},
{
value: new Input()
}
]
}
]
});
To change focus position:
layoutList.focusIndex(index);
There is a global var
DEVELOP
which activates additional consistency checks and protection logic not available in release mode.
If you have any problem or suggestion please open an issue here. Pull requests are welcomed with respect to the JavaScript Code Style.
mag-component-layout-list
is released under the MIT License.