Skip to content

Latest commit

 

History

History
141 lines (108 loc) · 4.7 KB

LayoutDockHelper.md

File metadata and controls

141 lines (108 loc) · 4.7 KB
Raw

#LayoutDockHelper LayoutDockHelper helps positioning nodes using docking principles.

Example:

var LayoutDockHelper = require('famous-flex/helpers/LayoutDockHelper');

function HeaderFooterLayout(context, options) {
  var dock = new LayoutDockHelper(context);
  dock.top('header', options.headerHeight);
  dock.bottom('footer', options.footerHeight);
  dock.fill('content');
};

You can also use layout-literals to create layouts using docking semantics:

var layoutController = new LayoutController({
  layout: {dock: [
    ['top', 'header', 40],
    ['bottom', 'footer', 40, 1], // z-index +1
    ['fill', 'content']
  ]},
  dataSource: {
    header: new Surface({content: 'header'}),
    footer: new Surface({content: 'footer'}),
    content: new Surface({content: 'content'}),
  }
});

##class: LayoutDockHelper ⏏ Members

###new LayoutDockHelper(context, [options]) Params

  • context LayoutContext - layout-context
  • [options] Object - additional options
    • [margins] Object - margins to start out with (default: 0px)
    • [translateZ] Number - z-index to use when translating objects (default: 0)

###layoutDockHelper.parse(data) Parses the layout-rules based on a JSON data object. The object should be an array with the following syntax: [[rule, node, value, z], [rule, node, value, z], ...]

Example:

[
  ['top', 'header', 50],
  ['bottom', 'footer', 50, 10], // z-index: 10
  ['margins', [10, 5]], // marginate remaining space: 10px top/bottom, 5px left/right
  ['fill', 'content']
]

Params

  • data Object - JSON object

###layoutDockHelper.top([node], [height], [z]) Dock the node to the top.

Params

  • [node] LayoutNode | String - layout-node to dock, when ommited the height argument argument is used for padding
  • [height] Number - height of the layout-node, when ommited the height of the node is used
  • [z] Number - z-index to use for the node

Returns: LayoutDockHelper - this
###layoutDockHelper.left([node], [width], [z]) Dock the node to the left

Params

  • [node] LayoutNode | String - layout-node to dock, when ommited the width argument argument is used for padding
  • [width] Number - width of the layout-node, when ommited the width of the node is used
  • [z] Number - z-index to use for the node

Returns: LayoutDockHelper - this
###layoutDockHelper.bottom([node], [height], [z]) Dock the node to the bottom

Params

  • [node] LayoutNode | String - layout-node to dock, when ommited the height argument argument is used for padding
  • [height] Number - height of the layout-node, when ommited the height of the node is used
  • [z] Number - z-index to use for the node

Returns: LayoutDockHelper - this
###layoutDockHelper.right([node], [width], [z]) Dock the node to the right.

Params

  • [node] LayoutNode | String - layout-node to dock, when ommited the width argument argument is used for padding
  • [width] Number - width of the layout-node, when ommited the width of the node is used
  • [z] Number - z-index to use for the node

Returns: LayoutDockHelper - this
###layoutDockHelper.fill(node, [z]) Fills the node to the remaining content.

Params

  • node LayoutNode | String - layout-node to dock
  • [z] Number - z-index to use for the node

Returns: LayoutDockHelper - this
###layoutDockHelper.margins(margins) Applies indent margins to the remaining content.

Params

  • margins Number | Array - margins shorthand (e.g. '5', [10, 10], [5, 10, 5, 10])

Returns: LayoutDockHelper - this