Last active
September 11, 2018 10:23
-
-
Save EddyVerbruggen/b87120881e1dc3d6ee30e01ed1c7ef5d to your computer and use it in GitHub Desktop.
Adding depth / shadow to your NativeScript RadSideDrawer (iOS)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// In case of Angular, this is the component that contains a view with a <RadSideDrawer> | |
export class MenuComponent implements AfterViewInit { | |
@ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent; | |
private _drawer: SideDrawerType; | |
ngAfterViewInit(): void { | |
this._drawer = this.drawerComponent.sideDrawer; | |
this._changeDetectionRef.detectChanges(); | |
// here comes the magic! | |
if (this._drawer.ios) { | |
// if your menu is drawn 'below' the hostview, do this: | |
this._drawer.ios.defaultSideDrawer.style.shadowMode = 1; // TKSideDrawerShadowMode.Hostview; | |
// .. but if the menu is drawn 'above' the hostview, do this: | |
this._drawer.ios.defaultSideDrawer.style.shadowMode = 2; // TKSideDrawerShadowMode.SideDrawer; | |
// if you have shadowMode = 2, then you can add a little dim to the lower layer to add some depth. Keep it subtle though: | |
this.drawer.ios.defaultSideDrawer.style.dimOpacity = 0.12; | |
// then tweak the shadow to your liking: | |
this._drawer.ios.defaultSideDrawer.style.shadowOpacity = 0.75; // 0-1, higher is darker | |
this._drawer.ios.defaultSideDrawer.style.shadowRadius = 5; // higher is more spread | |
// bonus feature: control the menu animation speed (in seconds) | |
this._drawer.ios.defaultSideDrawer.transitionDuration = 0.25; | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Very nice Eddy - love this 👍