javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-11-05 13:26:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

add listview support for safe area

Browse Source
This commit is contained in:
Martin Yankov
2018-07-26 16:19:05 +03:00
parent a9e37012bc
commit 017534c30d
26 changed files with 376 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
e2e/safe-area/app/home/home-page.xml
View File

@@ -7,6 +7,7 @@
<StackLayout>
<Button text="GridLayout Examples" tap="onNavigate" route="gridlayout/gridlayout-page"></Button>
<Button text="ScrollView Examples" tap="onNavigate" route="scrollview/scrollview-page"></Button>
<Button text="ListView Examples" tap="onNavigate" route="listview/listview-page" />
<Button text="Component Examples" tap="onNavigate" route="component/component-page"></Button>
<Button text="WrapLayout Examples" tap="onNavigate" route="wraplayout/wraplayout-page"></Button>
</StackLayout>

10
e2e/safe-area/app/listview/action-bar/grid-3x3-nested-listview-page.xml Normal file
View File

@@ -0,0 +1,10 @@
<Page class="page"
xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:fragments="listview/fragments">
<ActionBar class="action-bar">
<Label class="action-bar-title" text="ListView Examples"></Label>
</ActionBar>
<fragments:grid-3x3-nested-listview-fragment></fragments:grid-3x3-nested-listview-fragment>
</Page>

10
e2e/safe-area/app/listview/action-bar/listview-nested-grid-3x3-page.xml Normal file
View File

@@ -0,0 +1,10 @@
<Page class="page"
xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:fragments="listview/fragments">
<ActionBar class="action-bar">
<Label class="action-bar-title" text="ListView Examples"></Label>
</ActionBar>
<fragments:listview-nested-grid-3x3-fragment></fragments:listview-nested-grid-3x3-fragment>
</Page>

10
e2e/safe-area/app/listview/action-bar/listview-nested-hstack-page.xml Normal file
View File

@@ -0,0 +1,10 @@
<Page class="page"
xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:fragments="listview/fragments">
<ActionBar class="action-bar">
<Label class="action-bar-title" text="ListView Examples"></Label>
</ActionBar>
<fragments:listview-nested-hstack-fragment></fragments:listview-nested-hstack-fragment>
</Page>

10
e2e/safe-area/app/listview/action-bar/listview-nested-vstack-page.xml Normal file
View File

@@ -0,0 +1,10 @@
<Page class="page"
xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:fragments="listview/fragments">
<ActionBar class="action-bar">
<Label class="action-bar-title" text="ListView Examples"></Label>
</ActionBar>
<fragments:listview-nested-vstack-fragment></fragments:listview-nested-vstack-fragment>
</Page>

10
e2e/safe-area/app/listview/action-bar/listview-page.xml Normal file
View File

@@ -0,0 +1,10 @@
<Page class="page"
xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:fragments="listview/fragments">
<ActionBar class="action-bar">
<Label class="action-bar-title" text="ListView Examples"></Label>
</ActionBar>
<fragments:listview-fragment></fragments:listview-fragment>
</Page>

8
e2e/safe-area/app/listview/fragments/grid-3x3-nested-listview-fragment.ts Normal file
View File

@@ -0,0 +1,8 @@
import { Page } from "ui/page";
import { ListViewViewModel } from "./listview-fragment-view-model";
export function onLoaded(args) {
const page = <Page>args.object;
page.bindingContext = new ListViewViewModel();
}

55
e2e/safe-area/app/listview/fragments/grid-3x3-nested-listview-fragment.xml Normal file
View File

@@ -0,0 +1,55 @@
<GridLayout rows="*, *, *" columns="*, *, *" backgroundColor="CadetBlue">
<ListView row="0" col="0" items="{{ items }}" loaded="onLoaded" backgroundColor="SkyBlue">
<ListView.itemTemplate>
<Label text="{{ text }}"></Label>
</ListView.itemTemplate>
</ListView>
<ListView row="0" col="1" items="{{ items }}" loaded="onLoaded" backgroundColor="Indigo">
<ListView.itemTemplate>
<Label text="{{ text }}"></Label>
</ListView.itemTemplate>
</ListView>
<ListView row="0" col="2" items="{{ items }}" loaded="onLoaded" backgroundColor="Crimson">
<ListView.itemTemplate>
<Label text="{{ text }}"></Label>
</ListView.itemTemplate>
</ListView>
<ListView row="1" col="0" items="{{ items }}" loaded="onLoaded" backgroundColor="Chocolate">
<ListView.itemTemplate>
<Label text="{{ text }}"></Label>
</ListView.itemTemplate>
</ListView>
<ListView row="1" col="1" items="{{ items }}" loaded="onLoaded" backgroundColor="Cornsilk">
<ListView.itemTemplate>
<Label text="{{ text }}"></Label>
</ListView.itemTemplate>
</ListView>
<ListView row="1" col="2" items="{{ items }}" loaded="onLoaded" backgroundColor="BurlyWood">
<ListView.itemTemplate>
<Label text="{{ text }}"></Label>
</ListView.itemTemplate>
</ListView>
<ListView row="2" col="0" items="{{ items }}" loaded="onLoaded" backgroundColor="GoldenRod">
<ListView.itemTemplate>
<Label text="{{ text }}"></Label>
</ListView.itemTemplate>
</ListView>
<ListView row="2" col="1" items="{{ items }}" loaded="onLoaded" backgroundColor="Khaki">
<ListView.itemTemplate>
<Label text="{{ text }}"></Label>
</ListView.itemTemplate>
</ListView>
<ListView row="2" col="2" items="{{ items }}" loaded="onLoaded" backgroundColor="IndianRed">
<ListView.itemTemplate>
<Label text="{{ text }}"></Label>
</ListView.itemTemplate>
</ListView>
</GridLayout>

18
e2e/safe-area/app/listview/fragments/listview-fragment-view-model.ts Normal file
View File

@@ -0,0 +1,18 @@
import { Observable } from "data/observable";
export class ListViewViewModel extends Observable {
items: Array<any>;
constructor() {
super();
this.items = [];
for (let i = 0; i < 50; i++) {
this.items.push({
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque enim mi, id ultrices felis maximus vel.",
shortText: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
});
}
}
}

8
e2e/safe-area/app/listview/fragments/listview-fragment.ts Normal file
View File

@@ -0,0 +1,8 @@
import { Page } from "ui/page";
import { ListViewViewModel } from "./listview-fragment-view-model";
export function onLoaded(args) {
const page = <Page>args.object;
page.bindingContext = new ListViewViewModel();
}

5
e2e/safe-area/app/listview/fragments/listview-fragment.xml Normal file
View File

@@ -0,0 +1,5 @@
<ListView items="{{ items }}" loaded="onLoaded" backgroundColor="PowderBlue">
<ListView.itemTemplate>
<Label text="{{ text }}"></Label>
</ListView.itemTemplate>
</ListView>

8
e2e/safe-area/app/listview/fragments/listview-nested-grid-3x3-fragment.ts Normal file
View File

@@ -0,0 +1,8 @@
import { Page } from "ui/page";
import { ListViewViewModel } from "./listview-fragment-view-model";
export function onLoaded(args) {
const page = <Page>args.object;
page.bindingContext = new ListViewViewModel();
}

15
e2e/safe-area/app/listview/fragments/listview-nested-grid-3x3-fragment.xml Normal file
View File

@@ -0,0 +1,15 @@
<ListView items="{{ items }}" loaded="onLoaded" backgroundColor="Olive">
<ListView.itemTemplate>
<GridLayout rows="*, *, *" columns="*, *, *" backgroundColor="Olive">
<Label row="0" col="0" text="overflowing text, overflowing text"></Label>
<Label row="0" col="1" text="overflowing text, overflowing text"></Label>
<Label row="0" col="2" text="overflowing text, overflowing text"></Label>
<Label row="1" col="0" text="overflowing text, overflowing text"></Label>
<Label row="1" col="1" text="overflowing text, overflowing text"></Label>
<Label row="1" col="2" text="overflowing text, overflowing text"></Label>
<Label row="2" col="0" text="overflowing text, overflowing text"></Label>
<Label row="2" col="1" text="overflowing text, overflowing text"></Label>
<Label row="2" col="2" text="overflowing text, overflowing text"></Label>
</GridLayout>
</ListView.itemTemplate>
</ListView>

8
e2e/safe-area/app/listview/fragments/listview-nested-hstack-fragment.ts Normal file
View File

@@ -0,0 +1,8 @@
import { Page } from "ui/page";
import { ListViewViewModel } from "./listview-fragment-view-model";
export function onLoaded(args) {
const page = <Page>args.object;
page.bindingContext = new ListViewViewModel();
}

9
e2e/safe-area/app/listview/fragments/listview-nested-hstack-fragment.xml Normal file
View File

@@ -0,0 +1,9 @@
<ListView items="{{ items }}" loaded="onLoaded" backgroundColor="PowderBlue">
<ListView.itemTemplate>
<StackLayout orientation="horizontal" backgroundColor="Olive">
<Label text="{{ shortText }}"></Label>
<Label text="{{ shortText }}"></Label>
<Label text="{{ shortText }}"></Label>
</StackLayout>
</ListView.itemTemplate>
</ListView>

8
e2e/safe-area/app/listview/fragments/listview-nested-vstack-fragment.ts Normal file
View File

@@ -0,0 +1,8 @@
import { Page } from "ui/page";
import { ListViewViewModel } from "./listview-fragment-view-model";
export function onLoaded(args) {
const page = <Page>args.object;
page.bindingContext = new ListViewViewModel();
}

9
e2e/safe-area/app/listview/fragments/listview-nested-vstack-fragment.xml Normal file
View File

@@ -0,0 +1,9 @@
<ListView items="{{ items }}" loaded="onLoaded" backgroundColor="PowderBlue">
<ListView.itemTemplate>
<StackLayout backgroundColor="Olive">
<Label text="{{ text }}"></Label>
<Label text="{{ text }}"></Label>
<Label text="{{ text }}"></Label>
</StackLayout>
</ListView.itemTemplate>
</ListView>

8
e2e/safe-area/app/listview/listview-page.ts Normal file
View File

@@ -0,0 +1,8 @@
import { View, EventData } from "tns-core-modules/ui/core/view";
export function onNavigate(args: EventData) {
const view = args.object as View;
const route = view["route"];
view.page.frame.navigate(route);
}

28
e2e/safe-area/app/listview/listview-page.xml Normal file
View File

@@ -0,0 +1,28 @@
<Page class="page"
xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:fragments="listview/fragments"
navigatingTo="onNavigatingTo">
<ActionBar class="action-bar">
<Label class="action-bar-title" text="ListView Examples"></Label>
</ActionBar>
<StackLayout>
<StackLayout>
<Label text="Pages w/ ActionBar"></Label>
<Button text="ListView" tap="onNavigate" route="listview/action-bar/listview-page" />
<Button text="ListView Nested VStack" tap="onNavigate" route="listview/action-bar/listview-nested-vstack-page" />
<Button text="ListView Nested HStack" tap="onNavigate" route="listview/action-bar/listview-nested-hstack-page" />
<Button text="ListView Nested Grid 3x3" tap="onNavigate" route="listview/action-bar/listview-nested-grid-3x3-page" />
<Button text="Grid 3x3 Nested ListView" tap="onNavigate" route="listview/action-bar/grid-3x3-nested-listview-page" />
</StackLayout>
<StackLayout>
<Label text="Pages w/o ActionBar"></Label>
<Button text="ListView" tap="onNavigate" route="listview/no-action-bar/listview-page" />
<Button text="ListView Nested VStack" tap="onNavigate" route="listview/no-action-bar/listview-nested-vstack-page" />
<Button text="ListView Nested HStack" tap="onNavigate" route="listview/no-action-bar/listview-nested-hstack-page" />
<Button text="ListView Nested Grid 3x3" tap="onNavigate" route="listview/no-action-bar/listview-nested-grid-3x3-page" />
<Button text="Grid 3x3 Nested ListView" tap="onNavigate" route="listview/no-action-bar/grid-3x3-nested-listview-page" />
</StackLayout>
</StackLayout>
</Page>

7
e2e/safe-area/app/listview/no-action-bar/grid-3x3-nested-listview-page.xml Normal file
View File

@@ -0,0 +1,7 @@
<Page class="page"
xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:fragments="listview/fragments"
actionBarHidden="true">
<fragments:grid-3x3-nested-listview-fragment></fragments:grid-3x3-nested-listview-fragment>
</Page>

7
e2e/safe-area/app/listview/no-action-bar/listview-nested-grid-3x3-page.xml Normal file
View File

@@ -0,0 +1,7 @@
<Page class="page"
xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:fragments="listview/fragments"
actionBarHidden="true">
<fragments:listview-nested-grid-3x3-fragment></fragments:listview-nested-grid-3x3-fragment>
</Page>

7
e2e/safe-area/app/listview/no-action-bar/listview-nested-hstack-page.xml Normal file
View File

@@ -0,0 +1,7 @@
<Page class="page"
xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:fragments="listview/fragments"
actionBarHidden="true">
<fragments:listview-nested-hstack-fragment></fragments:listview-nested-hstack-fragment>
</Page>

7
e2e/safe-area/app/listview/no-action-bar/listview-nested-vstack-page.xml Normal file
View File

@@ -0,0 +1,7 @@
<Page class="page"
xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:fragments="listview/fragments"
actionBarHidden="true">
<fragments:listview-nested-vstack-fragment></fragments:listview-nested-vstack-fragment>
</Page>

7
e2e/safe-area/app/listview/no-action-bar/listview-page.xml Normal file
View File

@@ -0,0 +1,7 @@
<Page class="page"
xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:fragments="listview/fragments"
actionBarHidden="true">
<fragments:listview-fragment></fragments:listview-fragment>
</Page>