API status: unstable. This element may change, watch the changelog.

Design

Toolbar groups controls together to form a logical set of controls. In the current design they are not visibly contained, simply spaced to the grid.

Code

Toolbar and buttons:


                                                                  <div class="ace-toolbar" role="toolbar">
                                                                        <div class="ace-toolbar-group">
                                                                              <div class="ace-toolbar-item">
                                                                                    <div class="ace-button-group">
                                                                                          <button class="ace-button" type="button"><span>Button</span></button>
                                                                                          <button class="ace-button" type="button"><span>Button</span></button>
                                                                                          <button class="ace-button" type="button"><span>Button</span></button>
                                                                                    </div>
                                                                                    <div class="ace-button-group">
                                                                                          <button class="ace-button" type="button"><span>Button</span></button>
                                                                                          <button class="ace-button" type="button"><span>Button</span></button>
                                                                                    </div>
                                                                                    <button class="ace-button" type="button"><span>Button</span></button>
                                                                              </div>
                                                                              <div class="ace-toolbar-item">
                                                                                    <div class="ace-button-group">
                                                                                          <button class="ace-button" type="button"><span>Button</span></button>
                                                                                    </div>
                                                                              </div>
                                                                        </div>
                                                                  </div>

Just the toolbar:


                                                                  <div class="ace-toolbar" role="toolbar">
                                                                        <div class="ace-toolbar-group">
                                                                              <div class="ace-toolbar-item">
                                                                                <!-- Button groups, buttons, etc-->
                                                                              </div>
                                                                              <div class="ace-toolbar-item">
                                                                                <!-- Button groups, buttons, etc-->
                                                                              </div>
                                                                        </div>
                                                                  </div>

All elements accept the standard id and customClass.


                                                              <% ace.Toolbar(Array())
                                                                ace.ToolbarGroup(Array())
                                                                  ace.ToolbarItem(Array())
                                                                    ace.ButtonGroup
                                                                      ace.Button(Array("text", "Button"))
                                                                      ace.Button(Array("text", "Button"))
                                                                      ace.Button(Array("text", "Button"))
                                                                    ace.ButtonGroupEnd
                                                                    ace.ButtonGroup
                                                                      ace.Button(Array("text", "Button"))
                                                                      ace.Button(Array("text", "Button"))
                                                                    ace.ButtonGroupEnd
                                                                      ace.Button(Array("text", "Button"))
                                                                  ace.ToolbarItemEnd
                                                                  ace.ToolbarItem(Array())
                                                                    ace.ButtonGroup
                                                                      ace.Button(Array("text", "Button"))
                                                                    ace.ButtonGroupEnd
                                                                  ace.ToolbarItemEnd
                                                                ace.ToolbarGroupEnd
                                                              ace.ToolbarEnd %>