Toolbar

• Introduction
• Basic Example
• Real World Example

A collection of buttons that offer the ability of managed user interaction states.

---

Getting Started

First load the seed and CSS files, if you haven't yet.

<script src="https://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<link href="https://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>

Then initialize AlloyUI and load the Toolbar module.

YUI().use(
  'aui-toolbar',
  function(Y) {
    // code goes here
  }
);

---

Using Toolbar

Create an HTML element to house the Toolbar.

<div id="myToolbar"></div>

The most basic of tables require a container and an array of buttons. Pass both into your Toolbar after boundingBox and children, and don't forget to render it!

YUI().use(
  'aui-toolbar',
  function(Y) {
    new Y.Toolbar(
      {
        boundingBox: '#myToolbar',
        children: [
          [
            {
              icon: 'icon-camera'
            },
            {
              icon: 'icon-print'
            }
          ]
        ]
      }
    ).render();
  }
);

---

Configuring Toolbar

Also you can define a type to some group of buttons, it can be radio or checkbox.

YUI().use(
  'aui-toolbar',
  function(Y) {
    new Y.Toolbar(
      {
        boundingBox: '#myToolbar',
        children: [
          [
            'radio',
            {
              label: '1'
            },
            {
              label: '2'
            },
            {
              label: '3'
            }
          ],
          [
            'checkbox',
            {
              icon: 'icon-bold'
            },
            {
              icon: 'icon-italic'
            },
            {
              icon: 'icon-font'
            }
          ]
        ]
      }
    ).render();
  }
);