Toolbar

ToolBars can be constructed by adding buttons or more complex toolbar segments.

var ToolBar = require('nsx/button-toolbar');
var Button = require('nsx/trigger/button-trigger');

//...

// Once 'nsx/button-toolbar' has been loaded, toolbars can be defined with
// 'defineButtonToolbar' relative to the page
var toolbar = page.defineButtonToolbar({
  selector: "paging"
}, {
  visible: /* observable that defines when the toolbar is visible */
});

// define a single button
// the button is added at the end of the toolbar
var button = Button.defineButtonTrigger({
  layout: /* a string with css classes to style the button*/,
  label: /* the label or text for the button*/,
  icon: /* icon class for an icon*/,
  visible: /* observable that defines when the button is visible*/,
  trigger: /* if so wanted, a custom trigger can be supplied */,
});

// define a custom segment for the toolbar
// the segment is added at the end of the toolbar
var toolbarSegment = toolbar.defineToolbarSegment({
   view: "...",
   viewModel: {/*...*/}
 }, {
   visible: /* observable that defines when the toolbar is visible*/
 });

 toolbar.add(button.viewModel);
 toolbar.add(toolbarSegment);