How to use the tabris.TextView 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.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github eclipsesource / tabris-js / examples / parallax / parallax.js View on Github external
}).appendTo(contentComposite);

const titleComposite = new Composite({
  left: 0, right: 0, height: 78,
  id: 'titleComposite',
  background: rgba(255, 152, 0, INITIAL_TITLE_COMPOSITE_OPACITY)
}).appendTo(scrollView);

new TextView({
  left: 16, top: 16, right: 16,
  text: SUBTITLE,
  font: 'bold 16px',
  textColor: 'black'
}).appendTo(titleComposite);

new TextView({
  left: 16, bottom: 14, right: 16, top: 'prev()',
  text: TITLE,
  font: 'bold 24px',
  textColor: 'white'
}).appendTo(titleComposite);

scrollView.on('resize', ({height}) => {
  imageView.height  = height / 2;
  const titleCompHeight = titleComposite.height;
  // We need the offset of the title composite in each scroll event.
  // As it can only change on resize, we assign it here.
  titleCompY = Math.min(imageView.height - titleCompHeight, height / 2);
  titleComposite.top = titleCompY;
});

scrollView.on('scrollY', ({offset}) => {
github eclipsesource / tabris-js / snippets / popover.js View on Github external
function showPopover() {
  const popover = new Popover({width: 300, height: 400, anchor: button})
    .on('close', () => console.log('Popover closed'))
    .open();
  const navigationView = new NavigationView({
    layoutData: {left: 0, right: 0, top: 0, bottom: 0},
    navigationAction: new Action({
      title: 'Close',
      image: {
        src: device.platform === 'iOS' ? 'resources/close-black-24dp@3x.png' : 'resources/close-white-24dp@3x.png',
        scale: 3
      }
    }).on('select', () => popover.close())
  }).appendTo(popover.contentView);
  const page = new Page({title: 'Popover'}).appendTo(navigationView);
  new TextView({centerX: 0, centerY: 0, text: 'Hello popover'}).appendTo(page);
}
github eclipsesource / tabris-js / examples / typescript-weather-app / src / forecastTabView.ts View on Github external
private createTimeText(date: Date) {
    let minutes = date.getMinutes();
    let hours = date.getHours();
    let hoursString = (hours < 10) ? '0' + hours : hours;
    let minutesString = (minutes < 10) ? '0' + minutes : minutes;
    return new TextView({
      top: INNER_MARGIN, bottom: INNER_MARGIN, left: INNER_MARGIN,
      text: hoursString + ':' + minutesString,
      textColor: TEXT_COLOR,
      font: SMALL_FONT
    });
  }
github eclipsesource / tabris-js / snippets / navigationview-tabfolder.js View on Github external
function createPage(navigationView, title) {
  const text = title || 'Page ' + (navigationView.pages().length + 1);
  const page = new Page({
    title: text,
    background: '#eeeeee'
  }).appendTo(navigationView);
  const controls = new Composite({
    centerX: 0, centerY: 0
  }).appendTo(page);
  new TextView({
    centerX: 0,
    text
  }).appendTo(controls);
  new Button({
    top: 'prev() 16', centerX: 0,
    text: 'Add Page'
  }).onSelect(() => createPage(navigationView))
    .appendTo(controls);
  new Button({
    top: 'prev() 16', centerX: 0,
    text: 'Remove Page'
  }).onSelect(() => page.dispose())
    .appendTo(controls);
}
github eclipsesource / tabris-js / snippets / layout-nested.js View on Github external
const composite = new Composite({
    left: MARGIN, top: ['prev()', MARGIN], right: MARGIN,
    background: '#f3f3f3'
  });

  const imageView = new ImageView({
    left: MARGIN, top: MARGIN, width: 56,
    image: 'resources/target_200.png',
    background: '#aaaaaa'
  }).appendTo(composite);

  const innerComposite = new Composite({
    left: imageView, right: MARGIN, centerY: 0
  }).appendTo(composite);

  new TextView({
    left: MARGIN, right: 0,
    text: 'Title Text',
    font: 'bold 16px'
  }).appendTo(innerComposite);

  new TextView({
    left: MARGIN, right: 0, top: 'prev()',
    text: 'Body Text'
  }).appendTo(innerComposite);

  if (depth > 0) {
    createLayout(depth - 1).appendTo(innerComposite);
  }

  return composite;
}
github eclipsesource / tabris-js / examples / cordova / SharingPage.js View on Github external
_createUI() {
    this.append(
      new TextView({id: 'titleLabel', text: this.title + ' options', font: '20px'}),
      new TextView({id: 'descriptionLabel', text: this.description, font: '14px'}),
      ...this.options.map(option =>
        new Button({class: 'optionsButton', text: option.name})
          .on('select', () => option.handler(this.message))
      )
    );
  }
github eclipsesource / tabris-js / examples / web-socket / ChatScreen.js View on Github external
_createUI() {
    this.append(
      new Composite({id: 'inputContainer'}).append(
        new TextInput({id: 'chatInput', message: 'Enter chat message...', text: 'Hello Chat!'}),
        new Button({id: 'sendButton', text: 'Send'})
          .on('select', () => this._sendMessage())
      ),
      new ScrollView().append(
        new TextView({id: 'chatTextView', markupEnabled: true})
      )
    );
  }
github eclipsesource / tabris-js / examples / bookstore / BooksList.js View on Github external
_createUI() {
    this.append(
      new ImageView({id: 'image'}),
      new TextView({id: 'titleLabel', markupEnabled: true}),
      new TextView({id: 'authorLabel'})
    );
  }
github eclipsesource / tabris-js / snippets / tabfolder-swipe-parallax.js View on Github external
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);
}