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.

caution

First Creation of SliderDrawer should be written in app.js file after Router.push() 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.

import SliderDrawer from "@smartface/native/ui/sliderdrawer";
import Button from "@smartface/native/ui/button";
import { themeService } from "theme";
import Application from "@smartface/native/application";
import { styleableContainerComponentMixin, styleableComponentMixin } from "@smartface/styling-context";

class StyleableSliderDrawer extends styleableContainerComponentMixin(SliderDrawer) {}
class StyleableButton extends styleableComponentMixin(Button) {}

let mySliderDrawer = new StyleableSliderDrawer({
  width: 200,
});
themeService.addGlobalComponent(mySliderDrawer, "mySliderDrawer");
let myButton = new StyleableButton({
  text: "Smartface Button",
});

mySliderDrawer.drawerPosition = SliderDrawer.Position.LEFT;
mySliderDrawer.addChild(myButton, "myButton", ".sf-button", {
  height: 40,
  width: 100,
  left: 50,
  top: 50,
  text: "Smartface Button",
  flexProps: {
    positionType: "ABSOLUTE",
  },
});
Application.sliderDrawer = mySliderDrawer;
mySliderDrawer.enabled = true;

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.