UI Components
RootLayout
Layout container for dynamically layering views with a programmatic API.
<RootLayout> is a layout container designed to be used as the primary RootLayout container for your app with a built-in API to easily control dynamic view layers. It extends a GridLayout so has all the features of a GridLayout, enhanced with additional APIs.
Examples β
Using RootLayout to open dynamic popups β
<RootLayout>
<!-- main content -->
<GridLayout>
<Label
verticalAlignment="center"
textAlignment="center"
text="Main content area"
/>
</GridLayout>
</RootLayout>import { createPopupView } from'./helper'
// create a dynamic popup
constview=createPopupView('#65adf1', 110, -30)// open the dynamic popup
getRootLayout()
.open(view, {
shadeCover: {
color: '#000',
opacity: 0.7,
tapToClose: true,
},
animation: {
enterFrom: {
opacity: 0,
translateY: 500,
duration: 500,
},
exitTo: {
opacity: 0,
duration: 300,
},
},
})
.catch((ex) => console.error(ex))// close the dynamic popup
getRootLayout()
.close(view, {
opacity: 0,
translate: { x: 0, y: -500 },
})
.catch((ex) => console.error(ex))// helper to create a popup view
exportfunctioncreatePopupView(
color:string,
size:number,
offset:number,
):View {
constlayout=newStackLayout()
layout.height = size
layout.width = size
layout.marginTop = offset
layout.marginLeft = offset
layout.backgroundColor = color
layout.borderRadius =10
return layout
}API β
getRootLayout() β
import { getRootLayout } from'@nativescript/core'
constrootLayout:RootLayout=getRootLayout()Returns the reference to the RootLayout, or undefined if there's no <RootLayout>.
RootLayout is designed to be used as a single instance
Technically you can place multiple RootLayouts in your templates, but only the last created instance will be accessible via the getRootLayout method. The API has been designed to control a single instance, usually placed as the root view of your Application.
Methods β
open() β
open(view: View, options?: RootLayoutOptions): Promise<void>Opens the view and brings it to the front by default.
See View, RootLayoutOptions.
bringToFront() β
bringToFront(view: View, animated?: boolean): Promise<void>Brings the view to the front if it's not already. If the view is not currently shown inside the RootLayout, the call is ignored.
See View.
close() β
close(view: View, exitTo?: TransitionAnimation): Promise<void>See View, TransitionAnimation.
closeAll() β
closeAll(): Promise<void>Closes all views.
getShadeCover() β
getShadeCover(): ViewReturns the shade cover (overlay view).
RootLayoutOptions β
shadeCover β
shadeCover: ShadeCoverOptionsSee ShadeCoverOptions.
animation β
animation: {
enterFrom?: TransitionAnimation,
exitTo?: TransitionAnimation
}enterFrom is only applied if it's the first one to be opened.
exitFrom is only applied if it's the last one to be closed
See TransitionAnimation.
ShadeCoverOptions β
opacity β
opacity: numbercolor β
color: ColorSets the color of the shade cover.
See Color.
tapToClose β
tapToClose: booleanAllows closing by tapping on the shade cover.
animation β
animation: {
enterFrom?: TransitionAnimation,
exitTo?: TransitionAnimation
}enterFrom is only applied if it's the first one to be opened.
exitFrom is only applied if it's the last one to be closed
See TransitionAnimation.
ignoreShadeRestore β
ignoreShadeRestore: booleanTransitionAnimation β
interfaceTransitionAnimation {
translateX?:number
translateY?:number
scaleX?:number
scaleY?:number
rotate?:number// degrees
opacity?:number
duration?:number// in ms
curve?:CoreTypes.AnimationCurve
}- Previous
- GridLayout
- Next
- FlexboxLayout
Contributors
Last updated: