Skip to content
This repository has been archived by the owner on Dec 2, 2021. It is now read-only.

Latest commit

 

History

History
164 lines (130 loc) · 7.31 KB

LayoutDockHelper.md

File metadata and controls

164 lines (130 loc) · 7.31 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.headerSize);
  dock.bottom('footer', options.footerSize);
  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'}),
  }
});

LayoutDockHelper ⏏

Kind: Exported class

new LayoutDockHelper(context, [options])

Param Type Description
context LayoutContext layout-context
[options] Object additional options
[options.margins] Object margins to start out with (default: 0px)
[options.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']
]

Kind: instance method of LayoutDockHelper

Param Type Description
data Object JSON object

layoutDockHelper.top([node], [height], [z]) ⇒ LayoutDockHelper

Dock the node to the top.

Kind: instance method of LayoutDockHelper
Returns: LayoutDockHelper - this

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

layoutDockHelper.left([node], [width], [z]) ⇒ LayoutDockHelper

Dock the node to the left

Kind: instance method of LayoutDockHelper
Returns: LayoutDockHelper - this

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

layoutDockHelper.bottom([node], [height], [z]) ⇒ LayoutDockHelper

Dock the node to the bottom

Kind: instance method of LayoutDockHelper
Returns: LayoutDockHelper - this

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

layoutDockHelper.right([node], [width], [z]) ⇒ LayoutDockHelper

Dock the node to the right.

Kind: instance method of LayoutDockHelper
Returns: LayoutDockHelper - this

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

layoutDockHelper.fill(node, [z]) ⇒ LayoutDockHelper

Fills the node to the remaining content.

Kind: instance method of LayoutDockHelper
Returns: LayoutDockHelper - this

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

layoutDockHelper.margins(margins) ⇒ LayoutDockHelper

Applies indent margins to the remaining content.

Kind: instance method of LayoutDockHelper
Returns: LayoutDockHelper - this

Param Type Description
margins Number | Array margins shorthand (e.g. '5', [10, 10], [5, 10, 5, 10])

layoutDockHelper.get() ⇒ Object

Gets the current left/right/top/bottom/z bounds used by the dock-helper.

Kind: instance method of LayoutDockHelper
Returns: Object - {left: x, right: x, top: x, bottom: x, z: x}