mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-08-16 03:31:45 +08:00
adding backStackEntry example, including missing import md file text field (#5319)
This commit is contained in:
@ -20,3 +20,33 @@ To perform navigation, you will need a reference to the topmost frame of the app
|
||||
|
||||
### Navigating Back
|
||||
{%snippet frame-back%}
|
||||
|
||||
### Back Navigation with BackstackEntry
|
||||
Using the `BackstackEntry` allows us to navigate back to a specific page.
|
||||
|
||||
```XML
|
||||
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
|
||||
|
||||
<Page.actionBar>
|
||||
<ActionBar title="Page 5" icon="" class="action-bar">
|
||||
</ActionBar>
|
||||
</Page.actionBar>
|
||||
|
||||
<StackLayout class="p-20">
|
||||
<Label text="Page 5" class="h1 text-center"/>
|
||||
<Button text="back to the first page" tap="onTap" class="btn btn-primary btn-active"/>
|
||||
</StackLayout>
|
||||
</Page>
|
||||
```
|
||||
```TypeScript
|
||||
import {BackstackEntry, Frame} from "ui/frame"
|
||||
|
||||
export function backNavigation(args){
|
||||
const backstackEntryFirstPage = args.object.page.frame.backStack[0];
|
||||
const frame = args.object.page.frame;
|
||||
frame.goBack(backstackEntryFirstPage);
|
||||
}
|
||||
```
|
||||
With the help of the Frame we access the page's BackstackEntry by providing the the sequence number - `backStack[<page number>]`. In the example above we will navigate back to the initial page and to do that we need to take the first BackstackEntry as follow: `topmost().backStack[0]`
|
||||
|
||||
> NB: We start counting the pages from 0. If we need to take the entry for the first page we need to take the it while using the 0 index, for the second 1 index, etc.
|
||||
|
@ -16,11 +16,11 @@ import { Span } from "tns-core-modules/text/span";
|
||||
import { TextField } from "tns-core-modules/ui/text-field";
|
||||
// << require-textfield
|
||||
// Other frequently used modules when working with buttons include:
|
||||
|
||||
// >> require-observable-binding-options-textfield
|
||||
import { BindingOptions } from "tns-core-modules/ui/core/bindable";
|
||||
// >> require-observable-textfield
|
||||
|
||||
import { Observable } from "tns-core-modules/data/observable";
|
||||
// << require-observable-textfield
|
||||
// << require-observable-binding-options-textfield
|
||||
|
||||
// ### Binding two TextFields text property to observable view-model property.
|
||||
// >> binding-text-property-textfield
|
||||
|
@ -13,7 +13,7 @@ Using a TextField requires the text-field module.
|
||||
{%raw%}<TextField text="{{ someProperty }}" />
|
||||
<TextField text="{{ someProperty }}" />{%endraw%}
|
||||
```
|
||||
{%snippet binding-text-property-textfield%}
|
||||
{%snippet require-observable-binding-options-textfield%}
|
||||
## Creating a TextField
|
||||
{%snippet creating-textfield%}
|
||||
### Setting the text of a TextField
|
||||
|
Reference in New Issue
Block a user