With Christmas around the corner, it is time for presents! The Tabris.js team joins the festivities with the new Tabris.js 2.3.0 release. This latest incarnation brings support for the iPhoneX, external loadable fonts, a themable navigation bar and more.
The latest Apple hardware brings a brand new form factor to the table and with Tabris.js 2.3.0 we support it out of the box. Several widgets have been adjusted to take care of the top nodge and the home indicator.
If your app uses a
NavigationView as its top level app frame you are all set. For more fine control you should take a look at this video.
A much requested feature is finally coming to Tabris.js: support for external font files. You are now able to load any TrueType and OpenType font in your app. You can use a loaded font everywhere where a
font property is supported. To load a font you register the font file with an alias on the
App object and than apply it via the
left: 16, top: 16, right: 16,
text: 'Sphinx of black quartz, judge my vow.',
font: '20px pacifico'
When registering the pacifico.ttf file, we gave it the alias
pacifico, which we than used on the
font property. The resulting
TextView will render its text with the given font.
Fonts can be loaded from a relative or absolut path or from a remote URL. Be aware that on windows you can only load a font file when it is bundled with the app. In addition on windows, you have to provide the font-family name with the font file. You declare it by concatenating the font-family name with the file name via a “
#” as shown above. To get the font-family name you could e.g. use a font inspector.
autoCapitalize control on
autoCapitalize property would capitalize all its letter when set to true. With the enahnced property you can now also use various modes to control how the capitalization is applied:
none– Do not change any text input
sentence– Capitalize the first word of a sentence
word– Capitalize every word
all– Capitalize every letter
You can still use the boolean values as before where
false maps to
true is equal to
theme property on
NavigationBar (Android only)
theme property on the
NavigationBar enables to customize the appearance of the navigation buttons on devices running Android 8 (Oreo) and above. Setting the
light switches the bar icons to be dark and visible on a light background.
Get Started with 2.3
To try out Tabris.js 2.3,
- Install the new Tabris.js 2 developer app on your device
- Try out the examples bundled in this app
- Run your own code snippets from the playground, our online Tabris.js editor
To start developing real apps,
- Install the latest Tabris CLI on your machine:
npm install -g tabris-cli
tabris initin an empty directory – this will create a simple example app
tabris serveand load it in the developer app
The documentation contains everything you need to know (tip: try the doc search). Beginners find a step-by-step guide in this ebook. If you have questions or comments, you’re also invited to join the community chat.