I have a page with a hidden ActionBar (see below) which works fine normally. However when I navigate to another page and then use back() to get back, the ActionBar is now fully visible.
(Note: I require the ActionBar to be on the page so I can change the status bar colour)
This is for the current version of NativeScript Angular.
<ActionBar visibility="collapsed"></ActionBar>
<GridLayout rows="*, auto" columns="*" *ngIf="pageLoaded">
...
</GridLayout>
You can also add the Page class to your constructor and call this.page.actionBarHidden = true; in your ngOnInit.
This way you can also remove actionbar you have defined in your html template.
I was able to just remove the ActionBar and find a different way to change the text colour on the StatusBar, that doesn't require the ActionBar on the page.
Related
Is there a way to create a reusable ActionBar for all pages?
I followed this tutorial which walked me through the process of adding in a RadSideDrawer to my 4 page app (not 100% if using a sidedrawer would change how I could approach this problem).
The 4 pages all have the same ActionBar. Instead of copy/pasting the code on each page (and updating on each page with changes), how do I reuse the same code for them all?
I tried statically defining the ActionBar code in the Frame content...
<template lang="html">
<Page>
<RadSideDrawer>
<StackLayout ~drawerContent>
<slot name="drawerContent"></slot>
</StackLayout>
<Frame ~mainContent>
<!-- TRIED PUTTING ACTIONBAR STRUCTURE HERE? -->
<slot name="mainContent"></slot>
</Frame>
</RadSideDrawer>
</Page>
</template>
I've also tried creating a custom component (with my ActionBar code living in /widgets/header/header.xml), by following this tutorial...
<Page xmlns:header="widgets/header">
<header:header />
</Page>
But I got an error message in the console:
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
My best guess, at this moment, is that NativeScript-Vue prefers the use of slots -- but how would I go about putting a slot into content that's populating another slot (<slot name="mainContent"></slot>)?
is there anyway to customize the search-bar element that NativeScript provides ?
and add some buttons in it.
am trying to get something like this (the search-bar in this app)
I've been searching a bit but found nothing about it.
Basic demo here: https://play.nativescript.org/?template=play-vue&id=y6iFw9
You can always hide default action bar with actionBarHidden="true on your <page> element and then create your own action bar. In this case you can use GridLayout and put each element in its own column. Something like:
<Page actionBarHidden="true>
<StackLayout>
<GridLayout rows="auto columns="auto, *, auto, auto, auto>
<Label col="0 text="Menu"/>
<TextField col="1></TextField>
<Label col="2 text="icon1"/>
<Label col="3 text="icon2"/>
<Label col="4 text="icon3"/>
</GridLayout>
</StackLayout>
</Page>
Just replace labels with your icons, and add #tap="yourFunction to fire when icon is pressed. To turn labels into icons you can use package like Fonticon.
The search-bar from tns-core-modules doesn't provide what you're looking for (see the API at https://docs.nativescript.org/api-reference/modules/_ui_search_bar_). I'd recommend to implement the component yourself.
i want to play an animation when a new message is added in the DOM.
but i don't know how to find my object and edit it with code in (this.zone.run) function :
addMessage(message: string){
this.messages.unshift(message);
// renderer
this.zone.run(() => {
});
}
here's the app.component.html
<StackLayout #container>
<ScrollView>
<WrapLayout #red>
<Label class="message" *ngFor="let message of messages" [text]="message"></Label>
</WrapLayout>
</ScrollView>
</StackLayout>
i want to edit the first child of the WrapLayout element
There is no DOM with NativeScript.
However a major community contributor wrote a plugin to help transition web developers into native development with NativeScript. This plugin provides helper methods that you'll find familiar to the web and DOM. https://github.com/NathanaelA/nativescript-dom
Just remember these are helper methods are not something provided out of the box by NativeScript. You can get any view by its id in NativeScript several ways and during different events (page/frame and component level).
I recall there's no page component with NativeScript with angular but I think you still have the frame module which you could do something like
frame.topmost().currentPage.getViewById('yourID');
Making sure you import(require) the frame module.
I have been trying to change the text of the back button in Xamarin.Forms without luck.
I tried already this code with no luck:
NavigationPage.SetBackButtonTitle(this, "");
I'm using a MasterDetailPage.
I tried to add the code into the constructor of the XAML cs file.
Libraries used: PRISM 6.2.0, Xamarin Forms 2.3.1.114
Any suggestion or idea?
Thanks in advance
Due to the topic:
One of the things that is a little bit unintuitive about this API is that you are setting the title for the back button that shows up when this page is the one that you are going back to. For example, you are trying to set the title to "Home". That means you should be calling this method on the Page that represents the "home" page, not the page that is visible when the back button that says "Home" is showing.
So, if you are navigating from Page1 to Page2, you should set NavigationPage.SetBackButtonTitle(this, "") in constructor of Page1 and on Page2 you will see the empty title of back button.
You have to set the Backbutton title of your previous page as string.Empty. By default it's the title of the previous page on the navigation stack that is shown as the back button text.
Also Android does not support this property.
You can also do it from the Code Behind of the current xaml page
public TodoPage()
{
InitializeComponent();
NavigationPage.SetBackButtonTitle(this, "Back");
}
NB: It has to be done on the previous page you want to set.
e.g. Page A has to have the code if you want Page B to show "Back" title.
Belated answer but maybe someone will find this useful in the future… Anyhow, if you wish to get rid of the back button title from XAML, you can either add NavigationPage.BackButtonTitle="" for any ContentPage that should have the title removed or you can define new ContentPage style in your App.xaml file like this:
<Style x:Key="ContentPageStyle" TargetType="ContentPage">
<Setter Property="BackgroundColor" Value="White" /><!-- just an example of other things that can be in here -->
<Setter Property="NavigationPage.BackButtonTitle" Value="" />
</Style>
I was, however, unable to turn this into an implicit global style that would get applied automatically without the need to specify Style="{StaticResource ContentPageStyle}" for each ContentPage – I'm not sure why that one doesn't work.
You can set the attribute NavigationPage.BackButtonTitle on ContentPage
For example:
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:T3R"
mc:Ignorable="d"
Title="Title of Page"
NavigationPage.BackButtonTitle="Cancel"
x:Class="T3R.MainPage">
Remember the following:
I understand this only works on iOS
For any given page, the back button title is set by the page that presents it. This way, the button label can vary with respect to the page that precedes it on the navigation stack (of which there can be many).
You can set your back button text in XAML as follows (before ContentPage.Content):
<NavigationPage.TitleView>
<Label Text="{Binding PageTitle}" HorizontalOptions="Center"/>
</NavigationPage.TitleView>
Is it possible to create some base screen template (master screen) and use it in other screens?
For example I have application Component like this
#Component({
selector: "main",
directives: [NS_ROUTER_DIRECTIVES, Bar],
template : `
<StackLayout orientation="vertical">
<bar-component>
</bar-component>
<page-router-outlet></page-router-outlet>
</StackLayout>
` })
I'd like to have in all screens, but now I have it only on my very first screen ("" route) and then after changing screen using this._router.navigate(["/details"]); ("details" route) I can't see my . Do I do something wrong? Could you tell my please how can I create this functionality if it's possible.
try use <router-outlet></router-outlet> instead of <page-router-outlet>.
I think this test code from nativescript angular, shows what you want to do:
https://github.com/NativeScript/nativescript-angular/blob/master/ng-sample/app/examples/router/router-outlet-test.ts