TabBar.md

##TabBar TabBar widget for famo.us.

var TabBar = require('famous-flex/widgets/TabBar');

var tabBar = new TabBar({
  classes: ['black'],
  renderables: {
    background: true,
    selectedItemOverlay: true,
    spacers: true
  }
});
tabBar.setItems([
  'one',
  'two',
  'three'
]);
this.add(tabBar); // add to the render-tree

tabBar.on('tabchange', function(event) {
  console.log('new tab selected: ' + event.index);
});

The surfaces that are created, use the the css-classes ff-widget and ff-tabbar. You can add additional css-classes by using the classes option in the constructor.

Example css styles for a black theme:

.ff-tabbar.background.black {
  background-color: #101010;
}
.ff-tabbar.item.black {
  color: #f7f3f7;
}
.ff-tabbar.selectedItemOverlay.black {
  border-bottom: 6px solid #30b6e7;
}
.ff-tabbar.spacer.black:after {
  content: "";
  background-color: #333333;
  width: 100%;
  top: 10px;
  bottom: 10px;
  position: absolute;
}

• TabBar
  • class: TabBar ⇐ View ⏏
    • new TabBar(options)
    • instance
      • .setOptions(options) ⇒ TabBar
      • .setItems(items) ⇒ TabBar
      • .getItems() ⇒ Array
      • .getItemSpec(index) ⇒ Spec
      • .setSelectedItemIndex(index) ⇒ TabBar
      • .getSelectedItemIndex() ⇒ Number
      • .getSize() ⇒ Array

###class: TabBar ⇐ View ⏏ Extends: View
####new TabBar(options)

Param	Type	Description
options	Object	Configurable options.
[options.tabBarLayout]	Object	Layout-options that are passed to the TabBarLayout.
[options.layoutController]	Object	Options that are passed to the underlying layout-controller.
[options.classes]	Array.String	Css-classes that are added to the surfaces that are created.
[options.renderables]	Object	Options that specify which renderables should be created.
[options.createRenderable]	function	Overridable function that is called when a renderable is created.

####tabBar.setOptions(options) ⇒ TabBar Patches the TabBar instance's options with the passed-in ones.

Param	Type	Description
options	Object	Configurable options.
[options.tabBarLayout]	Object	Layout-options that are passed to the TabBarLayout.
[options.layoutController]	Object	Options that are passed to the underlying layout-controller.

Returns: TabBar - this
####tabBar.setItems(items) ⇒ TabBar Sets the items for the tab-bar.

Example 1:

var tabBar = new TabBar();
tabBar.setItems([
  'one',
  'two',
  'three'
]);

Example using Ionic icons:

var tabBar = new TabBar();
tabBar.setItems([
  '<div class="icon ion-flag"></div>Flag',
  '<div class="icon ion-map"></div>Map',
  '<div class="icon ion-gear-a"></div>Settings'
]);

CSS:

.ff-tabbar.item {
  font-size: 12px;
}
.ff-tabbar.item .icon {
  font-size: 24px;
}

Param	Type	Description
items	Array	Array of tab-item renderables.

Returns: TabBar - this
####tabBar.getItems() ⇒ Array Get the tab-item renderables for the tab-bar.

Returns: Array - tab-item renderables
####tabBar.getItemSpec(index) ⇒ Spec Get the spec (size, transform, etc..) of the given tab-item.

Param	Type	Description
index	Number	Index of the tab-item.

Returns: Spec - item spec
####tabBar.setSelectedItemIndex(index) ⇒ TabBar Sets the index of the selected tab.

Param	Type	Description
index	Number	selected index.

Returns: TabBar - this
####tabBar.getSelectedItemIndex() ⇒ Number Get the index of the selected tab-item.

Returns: Number - selected index
####tabBar.getSize() ⇒ Array Get the size of the widget.

Returns: Array - size.