I'm trying to design an overlay screen in Nativescript
.
I need a half-transparent screen with full transparency that shows what the user needs to do. Is there any default plugin available or layouts?
I'm trying to design an overlay screen in Nativescript
.
I need a half-transparent screen with full transparency that shows what the user needs to do. Is there any default plugin available or layouts?
<GridLayout>
<Label text="Play with NativeScript!"></Label>
<Label class="overlay" text="I'm an overlay" verticalAlignment="center"></Label>
</GridLayout>
By default everything in GridLayout is placed in the first row in the first column unless you define otherwise. If you define two views in the same column and row, the lowest view will be stacked in front of the previous one.
You can of course use any layouts inside and use things such as colSpan or rowSpan.
<GridLayout columns="*" rows="*">
<StackLayout col="0" row="0">
<Label text="Play with NativeScript!"></Label>
</StackLayout>
<StackLayout col="0" row="0" class="overlay" >
<Label text="I'm an overlay"></Label>
</StackLayout>
</GridLayout>
You can use this nativescript example template for use overlay screen. https://play.nativescript.org/?template=play-js&id=7wQ8EL&v=5 This template is already have a half screen overlay with full transparent.
<StackLayout class="content-wrapper">
<router-outlet></router-outlet>
</StackLayout>
<StackLayout class="custom-dialog">
<Label text="Loading..." textWrap="true"></Label>
</StackLayout>
</AbsoluteLayout>
You can use this to display overlay. Fill the content with your loading and set opacity if needed. In case you need to hide ActionBar, just set height to "0" using ContextBinding and Observables.
<AbsoluteLayout width="100%" height="100%" backgroundColor="yellow" opacity="0.9" style="z-index: 99999; margin-top: -10%;">
<Label text="10, 10" left="10" top="10" width="90" height="90" backgroundColor="red"/>
</AbsoluteLayout>
<AbsoluteLayout width="100%" height="10%" backgroundColor="yellow" opacity="0.9" style="z-index: 99999; margin-top: 100%;">
</AbsoluteLayout>