Tabris.js Widgets: Page
This widget represents a single page of a NavigationView. It serves as a host for other widgets. Page widget got only three own properties – you can choose an image and a title that are going to be shown in the navigation bar and decide if you want to autoDispose it after you go back using navigation.
Here is the simple Page example in JS syntax:
|
1 2 3 4 5 |
import { NavigationView, Page, contentView } from 'tabris'; new NavigationView({ layoutData: 'stretch' }) .append(new Page({ title: 'A Page', image: 'resources/image.jpg', autoDispose: false })) .appendTo(contentView); |
And the same code in JSX syntax:
|
1 2 3 4 5 6 7 |
import { NavigationView, Page, contentView } from 'tabris'; contentView.append( <NavigationView stretch> <Page title='A Page' image='resources/image.jpg' autoDispose={false} /> </NavigationView> ); |
You can’t specify a size for the Page. It will take all the available screen space down from the NavigationBar.
The example below shows how easy it is to create any amount of pages and navigate between them. Run it by scanning its QR code with the Tabris Developer App.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
import { Button, NavigationView, Page, Stack, contentView } from 'tabris'; contentView.append( <NavigationView stretch> <CustomPage title='Initial Page' /> </NavigationView> ); const navigationView = $(NavigationView).only(); let pageCount = 0; function CustomPage(attributes) { return ( <Page padding={16} {...attributes}> <Stack stretch spacing={16} alignment='stretchX'> <Button onSelect={addPage}>Create another page</Button> <Button onSelect={goBack}>Go back</Button> <Button onSelect={goToInitialPage}>Go to initial page</Button> </Stack> </Page> ); } function goToInitialPage() { navigationView.pages().slice(1).dispose(); } function goBack() { if (navigationView.pages().length > 1) { navigationView.pages().last().dispose(); } } function addPage() { navigationView.append( <CustomPage title={`Page ${++pageCount}`} /> ); } |
Use the Page documentation page to find out more about the widget.
Feedback is welcome!
Want to join the discussion?Feel free to contribute!
