2.5.0
New Popover dialog
A new Popover
popup has been introduced. It allows to cover the app UI in a modal fashion with a custom UI. On large screen devices the Popover
will be shown in a window style appearance while on small devices it covers the entire screen.
let popover = new Popover();
popover.contentView.append(new TextView({text: 'Hello Popover'}));
popover.open();
New navigationAction property on NavigationView
The navigationAction
can be used to replace the menu action on the NavigtationView
. This can be useful to e.g. create a custom "close" action.
Support for linear gradients
The background
property on a Widget
now supports linear gradients. The gradient syntax follows the same notation as the W3C linear-gradient
specification.
new Composite({
left: 0, right: 0, top: 0, bottom: 0,
background: 'linear-gradient(to right top, red, green 50%, aqua 150%)',
}).appendTo(tabris.ui.contentView);
Child selectors
All methods that accept selector a string can now also handle child selectors in the CSS-like syntax of 'selectorA > selectorB
. For example:
widget.apply({'.columnLayout > *': {left: 0, top: 'prev() 10', right: 0});
This will apply the given properties to all widgets who's parent has columnLayout
in its class attribute.
:host selector
The widget find
and apply
methods now also support the selector :host
, inspired by the Web Component API. It always refers to the widget instance of the method that is called. Used with the apply
method it allows a widget to refer to itself or descendants of a specific relationship to itself. Example:
widget.apply({
':host': {left: 0, top: 0, right: 0, bottom: 0},
':host > Composite': {left: 0, top: 'prev() 10', right: 0}
});
Previously this would have required either assigning specific id/class attributes to the targets or separate children
/set
calls.
New tap event on StatusBar
The StatusBar
supports a new tap
event on iOS. It can be used to e.g. trigger a "scroll-to-top" when the main content of the app consists of a scrolling container.
New name property on Device
The new name
property on Device
returns the user provided name of a device, e.g. "Joe's iPhone". The property is supported on iOS only.
Added support for printing images
The printing capabilities have been extended to print images. An images will be printed fullscreen in the center of the page. To support this new output type a property contentType
has been added to the print options. It has to be either image/<format>
or application/pdf
.
printer.print(data, {jobName: 'image.jpg', contentType: 'image/jpg'}))
.then(event => console.log('Printing finished', event))
.catch(err => console.error(err));