Widget “Button”

Extends Widget

A push button. Can contain a text or an image.

You can import this type like this:

import {Button} from 'tabris';

Or reference it directly form anywhere as “tabris.Button”. Android | iOS — | — Button on Android | Button on iOS

Properties

alignment

Type: string, supported values: left, right, center, default: center

The horizontal alignment of the button text.

font

Type: Font

The font used for the button text.

image

Type: Image

An image to be displayed on the button.

text

Type: string

The button’s label text.

In JSX the text content of the Button element is mapped to this property. Therefore <Button>Hello World</Button> would be the same as <Button text='Hello World' />.

textColor

Type: Color

The color of the text.

Events

alignmentChanged

Fired when the alignment property has changed.

Event Parameters

  • target: this The widget the event was fired on.

  • value: string The new value of alignment.

fontChanged

Fired when the font property has changed.

Event Parameters

  • target: this The widget the event was fired on.

  • value: Font The new value of font.

imageChanged

Fired when the image property has changed.

Event Parameters

  • target: this The widget the event was fired on.

  • value: Image The new value of image.

select

Fired when the button is pressed.

textChanged

Fired when the text property has changed.

Event Parameters

  • target: this The widget the event was fired on.

  • value: string The new value of text.

textColorChanged

Fired when the textColor property has changed.

Event Parameters

  • target: this The widget the event was fired on.

  • value: Color The new value of textColor.

Example

import {Button, ui} from 'tabris';

// Create a push button that counts up on selection

let count = 0;

new Button({
  left: 10, top: 10,
  text: 'Button'
}).on('select', ({target}) => target.text = 'Pressed ' + (++count) + ' times')
  .appendTo(ui.contentView);

See also