SliderDrawer

API Reference: UI.SliderDrawer

SliderDrawer is an object that displays a custom UI (usually a menu) as a panel on the left or right edge of the screen. It is hidden most of the time, it appears when user swipes a finger from the left or right edge of the screen or presses a certain button.

TypeScript code blocks include examples of how to implement, override and components within the theme. You can create page with the UI Editor to make your page compatible with theming and then you can implement themable components programmatically. Once the page is created with the UI Editor, it generates a class under scripts/generated/pages. You can then extend that class with the following TypeScript classes.

First Creation of SliderDrawer should be written in app.js file after Router.go() method.

Native Difference with onLoad

onLoad event is triggered on distinctive cases on both platforms. On Android, it is triggered when the slider drawer is assigned to the Router whereas on iOS it is when the user slides the first time to display the slider drawer.

TypeScript
JavaScript
TypeScript
import SliderDrawer = require('sf-core/ui/sliderdrawer');
import Button = require('sf-core/ui/button');
import componentContextPatch from "@smartface/contx/lib/smartface/componentContextPatch";
let mySliderDrawer = new SliderDrawer({
width: 200
});
componentContextPatch(mySliderDrawer, "mySliderDrawer");
let myButton = new Button({
text: "Smartface Button"
});
mySliderDrawer.drawerPosition = SliderDrawer.Position.LEFT;
//@ts-ignore
mySliderDrawer.layout.addChild(myButton, "myButton", ".sf-button", {
height: 40,
width: 100,
left: 50,
top: 50,
text: "Smartface Button",
flexProps: {
positionType: "ABSOLUTE"
}
});
//@ts-ignore
Application.sliderDrawer = mySliderDrawer;
JavaScript
const SliderDrawer = require('sf-core/ui/sliderdrawer');
const FlexLayout = require('sf-core/ui/flexlayout');
const Button = require('sf-core/ui/button');
const Application = require('sf-core/application');
var mySliderDrawer = new SliderDrawer({
width: 200
});
var myButton = new Button({
height: 40,
width: 100,
left: 50,
top: 50,
text: "Smartface Button",
positionType: FlexLayout.PositionType.ABSOLUTE
});
mySliderDrawer.drawerPosition = SliderDrawer.Position.LEFT;
mySliderDrawer.layout.addChild(myButton);
Application.sliderDrawer = mySliderDrawer;

There can be only 1 instance of SliderDrawer active through the whole application. Best practice of showing different content for different pages would be to use other container components and changing their visibilities.

User can show the SliderDrawer by pulling from one side of the screen. This behaviour can be changed by setting the enabled property. It is also possible to show/hide SliderDrawer programmatically by calling the show and hide methods of the SliderDrawer. Common usages of this programmatic approach is assigning this toggle behaviour to HeaderBar's left item event.

Origin Of SliderDrawer

On both platform SliderDrawer coordinates start from the most top left of screen.