Usage
<div id="appSkin" ui-type="AppSkin" ui-menu-type="0" ui-menu-left="false"
ui-footer-display="1" ui-persistent-menu-button="false"
ui-settings='{
"menu": [
{ "text": "Search", "href": "/search", "menuSection": 0,
"hasIcon": true, "cssClassIcon": "ico-search",
"groupTileSize": 16, "buttonTileSize": 4 },
{ "text": "Upload", "href": "/upload", "menuSection": 0,
"hasIcon": true, "cssClassIcon": "ico-upload",
"groupTileSize": 16, "buttonTileSize": 2 },
{ "text": "Settings", "href": "/settings", "menuSection": 0,
"hasIcon": true, "cssClassIcon": "ico-cog",
"groupTileSize": 16, "buttonTileSize": 8 }
]
}'>
<div ui-template="Header">
{logo}{menuButton}{menu}{searchBox}
</div>
</div>
const appSkin = $UI.createComponent(componyx.UI.AppSkin, {
id: 'appSkin',
menuType: 0,
menuLeft: false,
footerDisplay: 1,
persistentMenuButton: false,
menu: [
{ text: 'Search', href: '/search', menuSection: 0,
hasIcon: true, cssClassIcon: 'ico-search',
groupTileSize: 16, buttonTileSize: 4 },
{ text: 'Upload', href: '/upload', menuSection: 0,
hasIcon: true, cssClassIcon: 'ico-upload',
groupTileSize: 16, buttonTileSize: 2 },
{ text: 'Settings', href: '/settings', menuSection: 0,
hasIcon: true, cssClassIcon: 'ico-cog',
groupTileSize: 16, buttonTileSize: 8 }
],
containerElement: document.body
});
appSkin.setHeaderTemplate('{logo}{menuButton}{menu}{searchBox}');
appSkin.render();
A second navigation row ({topbar}...{/topbar}) can be added to the header
template when the menu shouldn't sit on the same line as the logo and search box.