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
}
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.
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
![]() gap
Pixel gap between components |
public
<Integer>
occupy
Default percentage size of placed component. -1 means use preferred size as the component size. |