Class zebkit.ui.Toolbar
extends <zebkit.ui.Panel>
<zebkit.ui>

Toolbar UI component. Handy way to place number of click able elements

Constructor:
zebkit.ui.Toolbar ( )



Inherited methods:
$setConstraints(c)    add(constr, d)    byConstraints([p], c)    byPath(path, [cb])    calcPreferredSize(target)    doLayout( )    fire(event, [path], [params])    focused( )    getBottom( )    getCanvas( )    getComponentAt(x, y)    getHorPadding( )    getLeft( )    getPreferredSize( )    getRight( )    getTop( )    getVerPadding( )    hasFocus( )    indexOf(c)    insert(i, constr, d)    invalidate( )    invalidateLayout( )    kidAdded(index, constr, l)    kidRemoved(i, l)    laidout( )    load(JSON)    off([eventName], [path], [cb])    on([eventName], [path], cb)    paintComponent(g)    paintViewAt(g, ax, ay, v)    properties([path], props)    property([path], name, value)    recalc( )    relocated(px, py)    remove(c)    removeAll( )    removeAt(i)    removeByConstraints(ctr)    removeMe([after])    repaint([x], [y], [w], [h])    requestFocus( )    requestFocusIn([timeout])    resized(pw, ph)    setAt(i, d)    setBackground(v)    setBorder([v])    setBottomPadding(bottom)    setBounds(x, y, w, h)    setByConstraints(constr, c)    setConstraints(ctr)    setEnabled(b)    setId(id)    setKids(a)    setLayout(m)    setLeftPadding(left)    setLocation(xx, yy)    setPadding(v)    setParent(o)    setPreferredSize(w, h)    setProperties([path], props)    setRightPadding(right)    setSize(w, h)    setTopPadding(top)    setVisible(b)    toBack( )    toFront( )    toPreferredHeight( )    toPreferredSize( )    toPreferredWidth( )    toView(target)    validate( )    validateMetric( )    vrp( )   


public <zebkit.ui.Panel> addDecorative (c)

Add the given component as decorative element of the toolbar. Decorative elements don't fire event and cannot be pressed


Parameters:
Returns: <zebkit.ui.Panel>

a component that has been added

public <zebkit.ui.Panel> addImage (img)

Add an image as the toolbar element


Parameters:
  • img <String | Image>

    an image or a path to the image


Returns: <zebkit.ui.Panel>

a component that has been added

public <zebkit.ui.Panel> addLine ( )

Add line to the toolbar component. Line is a decorative ] element that logically splits toolbar elements. Line as any other decorative element doesn't fire event


Returns: <zebkit.ui.Panel>

a component that has been added

public <zebkit.ui.Panel> addRadio (g, c)

Add a radio box as the toolbar element that belongs to the given group and has the specified content component


Parameters:
Returns: <zebkit.ui.Panel>

a component that has been added

public <zebkit.ui.Panel> addSwitcher (c)

Add a check box as the toolbar element with the specified content component


Parameters:
Returns: <zebkit.ui.Panel>

a component that has been added

protected <Boolean> isDecorative (c)

Test if the given component is a decorative element in the toolbar


Parameters:
Returns: <Boolean>

return true if the component is decorative element of the toolbar



Inherited attributes:
public zebkit.draw.View bg    public zebkit.draw.View border    public Boolean canHaveFocus    public Object constraints    public Integer height    public Boolean isEnabled    public Boolean isValid    public Boolean isVisible    public Array kids    public zebkit.layout.Layout layout    public zebkit.layout.Layoutable parent    public Integer width    public Integer x    public Integer y   





pressed

Fired when a toolbar element has been pressed

  var t = new zebkit.ui.Toolbar();

  // add three pressable icons
  t.addImage("icon1.jpg");
  t.addImage("icon2.jpg");
  t.addLine();
  t.addImage("ico3.jpg");

  // catch a toolbar icon has been pressed
  t.on(function (src) {
      ...
  });

Parameters: