Drawer
Extends Composite
A drawer that can be swiped in from the left edge of the screen. There’s only a single instance that can be accessed via tabris.ui.drawer. The drawer is locked by default. To use it in an application, set the property locked to false. The drawer can contain any kind of widgets.
Import this type with “const {Drawer} = require('tabris');”
Methods
close()
Returns: this
Closes the drawer.
open()
Returns: this
Opens the drawer. It may be useful to call this method on first startup, so that users notice the drawer and its contents.
Properties
enabled
Type: boolean, default: false
Controls whether the drawer can be opened and closed. When set to false, the drawer cannot be opened and calls to drawer.open() will be ignored.
win_displayMode
Windows 10
Type: string, supported values: overlay, compactOverlay, inline, compactInline, default: overlay
Controls how the drawer integrates into its targetView.
overlaycompletely hides the drawer when closed and overlays other content when opened.compactOverlaymakes the drawer partially visible when closed so a 48px wide bar remains side-by-side with the targetViews other content. If a drawer-action controls the drawer it is placed inside this bar. When the drawer is opened its remaining width overlays the targetViews other content.inlinecompletely hides the drawer when closed, but shows it side-by-side with the targetView when opened. The drawer does not close automatically in this mode.compactInlinemakes the drawer partially visible when closed (likecompactOverlay), but shows it side-by-side with the targetView when opened (likeinline).
Available only on windows.
win_targetView
Windows 10
Type: Widget, default: tabris.ui
This property may be set to an instance of NavigationView to make its drawer-action open/close the drawer. It also integrates the drawer into the NavigationView layout. When not set to NavigationView instance the property defaults to tabris.ui. Other widgets are not supported. Available only on Windows.
Events
close
iOSAndroid
Fired when the drawer is closed and has reached its resting position.
enabledChanged
Fired when the enabled property has changed.
Event Parameters
-
target: this The widget the event was fired on.
-
value: boolean The new value of enabled.
open
iOSAndroid
Fired when the drawer is opened and has reached its resting position.
win_displayModeChanged
Fired when the win_displayMode property has changed.
Event Parameters
-
target: this The widget the event was fired on.
-
value: string The new value of win_displayMode.
win_targetViewChanged
Fired when the win_targetView property has changed.
Event Parameters
-
target: this The widget the event was fired on.
-
value: Widget The new value of win_targetView.
Example
const {TextView, ui} = require('tabris');
// Enable the drawer and append a widget to it
let drawer = ui.drawer;
drawer.enabled = true;
drawer.on('open', () => console.log('drawer opened'))
.on('close', () => console.log('drawer closed'));
let arrow = String.fromCharCode(8592);
createLabel(arrow + ' Swipe from left or tap here')
.on('tap', () => drawer.open())
.appendTo(ui.contentView);
createLabel('Thank you!')
.on('tap', () => drawer.close())
.appendTo(drawer);
function createLabel(text) {
return new TextView({
left: 10, centerY: 0,
text: text,
font: '22px Arial'
});
}
