Class zebkit.layout.PercentLayout
mixed with <zebkit.layout.Layout>
<zebkit.layout>

Percent layout places components vertically or horizontally and sizes its according to its percentage constraints.

// create panel and set percent layout for it
var p = new zebkit.ui.Panel();
p.setLayout(new zebkit.layout.PercentLayout());

// add three buttons to the panel that are laid out horizontally with
// percent layout according to its constraints: 20, 30 and 50 percents
p.add(20, new zebkit.ui.Button("20%"));
p.add(30, new zebkit.ui.Button("30%"));
p.add(50, new zebkit.ui.Button("50%"));

Percentage constraints can be more complex. It is possible to specify a component vertical and horizontal alignments. Pass the following structure to control the alignments as the component constraints:

 {
     ax: "center | left | right | stretch",
     ay: "center | top | bottom | stretch",
     occupy: <Integer>  // -1 means to use preferred size
 }
Constructor:
zebkit.layout.PercentLayout ([dir], [gap], [ax], [ay], [occupy])

Parameters:
  • [dir] <String>

    a direction of placing components. The value can be "horizontal" or "vertical"

  • [gap] <Integer>

    a space in pixels between laid out components

  • [ax] <String>

    default horizontally component alignment. Use "center", "left", "right", "stretch" as the parameter value

  • [ay] <String>

    default vertical component alignment. Use "center", "top", "bottom", "stretch" as the parameter value

  • [occupy] <Integer>

    default percentage size of a component. -1 means to use preferred size.





Inherited methods:


public <String> ax

Default horizontal alignment. Use "left", "right", "center" or "stretch" as the attribute value

public <String> ay

Default vertical alignment. Use "top", "bottom", "center" or "stretch" as the attribute value

public <String> direction

Direction the components have to be placed (vertically or horizontally)

public <Integer> gap

Pixel gap between components

public <Integer> occupy

Default percentage size of placed component. -1 means use preferred size as the component size.