ListLayout.md

ListLayout

Lays out items and optionally sticky sections from top to bottom or left to right.

options	type	description
[itemSize]	Number/Function	Height or width in pixels of an item (used when renderNode has no size)
[margins]	Number/Array	Margins shorthand (e.g. 5, [10, 20], [2, 5, 2, 10])
[spacing]	Number	Spacing between items
[isSectionCallback]	Function	Callback that is called in order to check if a render-node is a section rather than a cell.

Example:

var FlexScrollView = require('famous-flex/FlexScrollView');
var ListLayout = require('famous-flex/layouts/ListLayout');

var scrollView = new FlexScrollView({
  layout: ListLayout,
  layoutOptions: {
    margins: [20, 10, 20, 10],
    spacing: 1,
    isSectionCallback: function(renderNode) {
      return renderNode.isSection;
    },
  },
  dataSource: [
    // first section
    _createSection(),
    _createCell(),
    _createCell(),
    // second section
    _createSection(),
    _createCell(),
  ]
});
this.add(scrollView);

function _createCell() {
  return new Surface({
    size: [undefined, 50],
    content: 'my cell'
  });
}

function _createSection() {
  var section = new Surface({
    size: [undefined, 30],
    content: 'my sticky section'
  });
  section.isSection = true; // mark renderNode as section
  return section;
}