I'm trying to remove the action bar from the app that I'm developing in NativeScript, I remove all the code that was related to the action bar (html and css code) but it continues appearing on the app.
HTML:
<ScrollView>
<StackLayout class="page p-t-15">
<Image src="~/app/img/logo.png" ></Image>
<Label class="m-t-10 text-center" text="Login" label.Alignment = "top";></Label>
<TextField class="m-t-10 m-b-10 m-l-15 m-r-15" hint="Email Address" keyboardType="email" autocorrect="false" autocapitalization="none"
[(ngModel)]="email"></TextField>
<TextField class="m-t-10 m-b-10 m-l-15 m-r-15" hint="Password" secure="true" autocorrect="false" autocapitalization="none"
[(ngModel)]="password"></TextField>
<Button class="btn btn-primary" text="SIGN IN" (tap)="onSigninButtonTap()"></Button>
<Label class="m-t-10 text-center" text="______ or ______"></Label>
<Button class="btn btn-outline" (tap)="onLoginWithSocialProviderButtonTap()" text="Log in with Social Provider"></Button>
<Label class="m-t-10 m-b-10 m-l-15 m-r-15" text="Forgot password?" (tap)="onForgotPasswordTap()"></Label>
<Label class="m-t-10 m-b-10 m-l-15 m-r-15" text="Não tem conta?" (tap)="onNaoTemContaTap()"></Label>
<Button class="btn btn-primary" text="Sign UP" [nsRouterLink]="['/browse']" pageTransition="slide" clearHistory="true"></Button>
</StackLayout>
</ScrollView>
CSS:
StackLayout {
height: 100%;
width: 100%;
background-image: linear-gradient(#000000,#439B9B , #000000);
}
In the page(s) that you want to remove the action bar, add import { Page } from "tns-core-modules/ui/page";
, then add private page: Page
inside your constructor. This then allows you to do this.page.actionBarHidden = true;
.
Somewhat like the following:
import { Page } from "tns-core-modules/ui/page";
...
export class ... {
constructor(private page: Page) {
this.page.actionBarHidden = true;
}
...
}
Note: this code only works in nativescript with angular, the idea applies to vanilla nativescript but the code is different