Tabris.js Widgets: TextView

The TextView widget is used to display text inside your Tabris.js application. With its help, you can apply text alignment, line spacing, text color, and use some HTML markup elements. It extends the Widget class. Using the parent class functions, you can modify common widget parameters such as size and position, background color or image, and font settings.

Properties and events

  • Property alignment determines the horizontal alignment of the text;
  • If property markupEnabled value is true, you can use some HTML tags inside the widget. 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>). There is no tag because TextView is not meant for if. For displaying images use ImageView widget;
  • Property selectable defines if the text can be selected or not;
  • tapLink event 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.

Examples

1. A demonstration of different font families and font sideloading

2. Try line spacing changes on the fly!

3. It is highly recommended to use modern compiled versions of JavaScript such as TypeScript and JSX. Here is the JSX example of enabling HTML markup for TextView

Useful tips

Remember that all Tabris widgets are JavaScript classes. While customizing the TextView you can extend it and use the custom child class instead. It might improve the structure of your application greatly.

For example, you can create CustomTextView class with parameters for font family and size, background color and corner radius. This way you will be able to modify it from one place later instead of looking for each TextView widget and customizing its manually.

For more detailed information about the widget, use TextView documentation page.