Zebra API Doc

zebra.layout.PercentLayout Class

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 zebra.ui.Panel();
   p.setLayout(new zebra.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 zebra.ui.Button("20%"));
   p.add(30, new zebra.ui.Button("30%"));
   p.add(50, new zebra.ui.Button("50%"));



  • [dir]
  • [gap]
  • [stretch]


  • [dir] Integer | String optional

    a direction of placing components. The value can be "zebra.layout.HORIZONTAL" or "zebra.layout.VERTICAL" or "horizontal" or "vertical"

  • [gap] Integer optional

    a space in pixels between laid out components

  • [stretch] Boolean optional

    true if the component should be stretched vertically or horizontally

Item Index




Integer readonly

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

Default: zebra.layout.HORIZONTAL


Integer readonly

Pixel gap between components

Default: 2


Integer readonly

Boolean flag that say if the laid out components have to be stretched vertically (if direction is set to zebra.layout.VERTICAL) or horizontally (if direction is set to zebra.layout.HORIZONTAL)

Default: true