Toolbars

Toolbar and ToolButton

A Toolbar is a container for items presented at the bottom of the screen. The Toolbar kind inherits from enyo.HFlexBox; by default, its items are instances of ToolButton.

Here's an example of a toolbar with three buttons, equally spaced apart:

{kind: "Toolbar", components: [
  {caption: "foo"},
  {kind: "Spacer"},
  {caption: "bar"},
  {kind: "Spacer"},
  {caption: "baz"}
]

There may be times when the ToolButton isn't exactly what you need, so Enyo also provides two kinds for grouping controls within a toolbar--ToolButtonGroup and RadioToolButtonGroup.

ToolButtonGroup

A ToolButtonGroup is a container for a group of buttons, designed to go inside a Toolbar. The buttons are laid out horizontally.

By default, the components in a menu toolbar are instances of GroupedToolButton.

{kind: "Toolbar", components: [
  {kind: "ToolButtonGroup", components: [
      {icon: "images/menu-icon-back.png", onclick: "goBack"},
      {icon: "images/menu-icon-forward.png", onclick: "goForward"},
      {icon: "images/menu-icon-refresh.png", onclick: "refresh"}
  ]}
]}

RadioToolButtonGroup

A RadioToolButtonGroup is a group of RadioToolButton objects, with toolbar styling applied. The RadioToolButtonGroup kind extends RadioGroup and RadioToolButton extends RadioButton.

Here's a simple example:

{kind: "Toolbar", components: [
  {kind: "RadioToolButtonGroup", components: [
      {icon: "images/menu-icon-back.png", onclick: "goBack"},
      {caption: "stay"},
      {icon: "images/menu-icon-forward.png", onclick: "goForward"},
  ]}
]}