How to use the tabris.Tab function in tabris

To help you get started, we’ve selected a few tabris examples, based on popular ways it is used in public projects.

github eclipsesource / tabris-js / snippets / tabfolder.js View on Github external
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}
  }).onAppear(({target}) => console.log(`${target.title} appeared`))
    .onDisappear(({target}) => console.log(`${target.title} disappeared`))
    .appendTo(tabFolder);
  new TextView({
    centerX: 0, centerY: 0,
    text: 'Content of Tab ' + title
  }).appendTo(tab);
}
github eclipsesource / tabris-js / test / typescript / Widgets / Tab.fail.ts View on Github external
import {Tab, Composite, WidgetCollection, Button} from 'tabris';

let widget: Tab = new Tab();
widget.appendTo(new Composite());
widget.insertBefore(new Composite());
widget.insertAfter(new Composite());

/*Expected
(4,
not assignable to parameter
(5,
not assignable to parameter
(6,
not assignable to parameter
*/
github eclipsesource / tabris-js / doc / api / typescript / tabris-tests.ts View on Github external
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);
}
github eclipsesource / tabris-js / snippets / screenshots.js View on Github external
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];
}
github eclipsesource / tabris-js / snippets / tabfolder-swipe-parallax.js View on Github external
imageViews[tabIndex - 1].set({
      opacity: Math.abs(offsetPercent),
      transform: {translationX: -(1 - Math.abs(offsetPercent)) * tabFolderWidth * PARALLAX}
    });
  }
  if (offsetPercent > 0 && tabIndex + 1 < tabFolder.children().length) {
    imageViews[tabIndex + 1].set({
      opacity: offsetPercent,
      transform: {translationX: Math.abs(1 - offsetPercent) * tabFolderWidth * PARALLAX}
    });
  }
}).appendTo(contentView);

for (let i = 0; i < PEOPLE.length; i++) {
  const person = PEOPLE[i];
  new Tab().appendTo(tabFolder)
    .append(
      new TextView({
        left: 0, right: 0, bottom: 0, height: 56,
        alignment: 'centerX',
        background: 'rgba(0, 0, 0, 0.3)',
        font: 'bold 24px',
        textColor: 'white',
        text: person.name
      }));
  new ImageView({
    left: 0, top: 0, right: 0, bottom: 0,
    scaleMode: 'fill',
    opacity: i === 0 ? 1 : 0,
    image: person.image
  }).appendTo(imageContainer);
}
github eclipsesource / tabris-js / snippets / screenshots.js View on Github external
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];
}
github eclipsesource / tabris-js / snippets / navigationview-tabfolder.js View on Github external
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);
}
github eclipsesource / tabris-js / examples / bookstore / BookDetailsPage.js View on Github external
_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})
        )
      )
    );
  }