How to use the tabris.TabFolder function in tabris

import {Tab, TabFolder, TextView, contentView} from 'tabris';

// Create a swipe enabled tab folder with 3 tabs

const tabFolder = new TabFolder({
  left: 0, top: 0, right: 0, bottom: 0,
  paging: true // enables swiping. To still be able to open the developer console in iOS, swipe from the bottom right.
}).appendTo(contentView);

createTab('Cart', 'resources/cart.png', 'resources/cart-filled.png');
createTab('Pay', 'resources/card.png', 'resources/card-filled.png');
createTab('Statistic', 'resources/chart.png', 'resources/chart-filled.png');

tabFolder.onSelectionChanged(({value: tab}) => console.log(`selectionChanged to ${tab.title}`));
tabFolder.onSelect(() => console.log(`select event`));

function createTab(title, image, seletedImage) {
  const tab = new Tab({
    title, // converted to upper-case on Android
    image: {src: image, scale: 2},
    selectedImage: {src: seletedImage, scale: 2}

import {app, Button, Composite, contentView, NavigationView, Page, Tab, TabFolder, TextView} from 'tabris';

// demonstrates NavigationViews as children of a TabFolder

const tabFolder = new TabFolder({
  left: 0, top: 0, right: 0, bottom: 0,
  tabBarLocation: 'bottom',
  background: 'white'
}).appendTo(contentView);

function createTab(title, image) {
  const tab = new Tab({title, image})
    .appendTo(tabFolder);
  const navigationView = new NavigationView({
    left: 0, top: 0, right: 0, bottom: 0
  }).appendTo(tab);
  createPage(navigationView, title);
}

function createPage(navigationView, title) {
  const text = title || 'Page ' + (navigationView.pages().length + 1);

function test_Tab() {
  var tab: Tab = new Tab();
  tab.set("foo", 23);
  tab.set({
    badge: "foo",
    title: "bar",
    image: {src: "http://example.org"}
  });
  var folder = new TabFolder();
  tab.appendTo(folder);
}

function test_TabFolder() {
  var widget: TabFolder = new TabFolder();
  widget.set("foo", 23);
  widget.set({
    paging: true,
    tabBarLocation: "auto",
    selection: tab1
  });
  var tab1: Tab, tab2: Tab;
  var same: TabFolder = widget.append(tab1, tab2);
}

import {TabFolder, Button, Tab} from 'tabris';


let widget = new TabFolder();

widget.onTabBarLocationChanged(function() {});
widget.onTabModeChanged(function() {});
widget.append(new Button());

class CustomTab extends Tab {
  public foo: string;
}

const badlyTypedTabFolder: TabFolder = new TabFolder();
const typedTabFolder: TabFolder = new TabFolder();
typedTabFolder.append(new Tab());

/*Expected
(6,
(7,

import {Tab, TabFolder, TextView, contentView} from 'tabris';

const tabFolder = new TabFolder({
  left: 0, top: 0, right: 0, bottom: 0,
  paging: true,
  tabBarLocation: 'hidden'
}).appendTo(contentView);

for (let i = 1; i <= 3; i++) {
  createTab('Page ' + i);
}

function createTab(text) {
  const tab = new Tab().appendTo(tabFolder);
  new TextView({
    centerX: 0, centerY: 0,
    text
  }).appendTo(tab);
}

function tabFolderSnippet(parent) {
  dimen(parent, large, small * 2 + 16);
  new TabFolder({
    left: 16, right: 16, top: 16, height: 144,
    background: 'white', elevation: 8, tabBarElevation: 2, tabBarLocation: 'top'
  }).appendTo(parent)
    .append(new Tab({title: 'Search'})
      .append(new TextView({centerX: 0, centerY: 0, text: 'Search tab'})))
    .append(new Tab({title: 'Settings'}));

  const tabFolder = new TabFolder({
    left: 16, right: 16, top: ['prev()', 16], bottom: 16,
    background: 'white', elevation: 8, tabBarElevation: 2, tabBarLocation: 'bottom'
  }).appendTo(parent)
    .append(new Tab({title: 'Search', image: 'resources/search-black-24dp@3x.png'}))
    .append(new Tab({title: 'Settings', image: 'resources/settings-black-24dp@3x.png'})
      .append(new TextView({centerX: 0, centerY: 0, text: 'Settings tab'})));
  tabFolder.selection = tabFolder.children()[1];
}

_createUI() {
    this.append(
      new Composite({id: 'detailsView'}).on('tap', () => this._openReadBookPage())
        .append(
          new ImageView({id: 'coverImage', image: this.book.image}),
          new TextView({id: 'titleLabel', text: this.book.title}),
          new TextView({id: 'authorLabel', text: this.book.author}),
          new TextView({id: 'priceLabel', text: PRICE})
        ),
      new TabFolder({id: 'tabFolder', tabBarLocation: 'top', paging: true}).append(
        new Tab({title: RELATED_TAB_TITLE}).append(
          new BooksList()
        ),
        new Tab({title: COMMENTS_TAB_TITLE}).append(
          new TextView({id: 'commentLabel', text: COMMENT})
        )
      )
    );
  }

const PARALLAX = 0.1;
const PEOPLE = [
  {name: 'Ian Bull', image: 'resources/ian.jpg'},
  {name: 'Jochen Krause', image: 'resources/jochen.jpg'},
  {name: 'Markus Knauer', image: 'resources/markus.jpg'},
  {name: 'Moritz Post', image: 'resources/moritz.jpg'},
  {name: 'Tim Buschtöns', image: 'resources/tim.jpg'}
];

const imageContainer = new Composite({
  left: 0, top: 0, right: 0, bottom: 0,
  background: 'white'
}).appendTo(contentView);

const tabFolder = new TabFolder({
  left: 0, top: 0, right: 0, bottom: 0,
  paging: true,
  tabBarLocation: 'hidden'
}).onScroll(({selection, offset}) => {
  const imageViews = imageContainer.children();
  const tabIndex = tabFolder.children().indexOf(selection);
  const tabFolderWidth = tabFolder.bounds.width;
  const offsetPercent = offset / tabFolderWidth;
  imageViews[tabIndex].set({
    opacity: 1 - Math.abs(offsetPercent),
    transform: {translationX: -offset * PARALLAX}
  });
  if (offsetPercent < 0 && tabIndex - 1 >= 0) {
    imageViews[tabIndex - 1].set({
      opacity: Math.abs(offsetPercent),
      transform: {translationX: -(1 - Math.abs(offsetPercent)) * tabFolderWidth * PARALLAX}