Widget “TextView”

Extends Widget

A widget to display a text. For images, use ImageView.

You can import this type like this:

import {TextView} from 'tabris';

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

Properties

alignment

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

The horizontal alignment of the text.

font

Type: Font

The font used for the text.

lineSpacing

Type: number, default: 1.0

The amount of space between each line of text. The lineSpacing property is a factor with a default value of 1.0.

markupEnabled

Type: boolean

Allows for a subset of HTML tags in the text. Supported tags are: a, del, ins, b, i, strong, em, big, small, br. All tags must be closed (e.g. use <br/> instead of <br>). Nesting tags is currently not supported.
This property can only be set on widget creation. Once set, it cannot be changed anymore.

maxLines

Type: number|null, default: null

Limit the number of lines to be displayed to the given maximum. null disables this limit.

selectable

< span class = 'android-tag' title = 'supported on Android' > Android < /span>

Type: boolean

Whether the text can be selected or not. Currently only support on Android.

text

Type: string

The text to display.

In JSX the text content of the TextView element is mapped to this property. Therefore <TextView>Hello World</TextView> would be the same as <TextView 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.

lineSpacingChanged

Fired when the lineSpacing property has changed.

Event Parameters

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

  • value: number The new value of lineSpacing.

maxLinesChanged

Fired when the maxLines property has changed.

Event Parameters

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

  • value: number|null The new value of maxLines.

selectableChanged

Fired when the selectable property has changed.

Event Parameters

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

  • value: boolean The new value of selectable.

Fires when the user clicks on a link in an html text. Requires to set markupEnabled to true and to provide a text containing an anchor (<a>) with an href attribute. Eg. textView.text = 'Website: <a href="http://example.com>example.com</a>'. The event object contains a property url which provides the anchors href url.

Event Parameters

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

  • url: string The url referenced by the href attribute of the anchor.

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 {TextView, ui} from 'tabris';

// Create text views with different alignments

new TextView({
  left: 10, top: 10, right: 10,
  text: 'Left',
  alignment: 'left'
}).appendTo(ui.contentView);

new TextView({
  left: 10, top: 'prev() 10', right: 10,
  text: 'Center',
  alignment: 'center'
}).appendTo(ui.contentView);

new TextView({
  left: 10, top: 'prev() 10', right: 10,
  text: 'Right',
  alignment: 'right'
}).appendTo(ui.contentView);

See also