mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-08-15 19:26:42 +08:00
Add a flexbox-repeater test page
This commit is contained in:
23
apps/app/ui-tests-app/flexbox/flexbox-main-page.ts
Normal file
23
apps/app/ui-tests-app/flexbox/flexbox-main-page.ts
Normal file
@ -0,0 +1,23 @@
|
||||
import { EventData } from "data/observable";
|
||||
import { MianPageViewModel } from "../mainPage";
|
||||
import { WrapLayout } from "ui/layouts/wrap-layout";
|
||||
import { Page } from "ui/page";
|
||||
import { getViewById } from "ui/core/view"
|
||||
|
||||
export function pageLoaded(args: EventData) {
|
||||
let page = <Page>args.object;
|
||||
let wrapLayout = <WrapLayout>getViewById(page, "wrapLayout");
|
||||
let examples = new Map<string, string>();
|
||||
|
||||
examples.set("flexbox", "flexbox/flexbox");
|
||||
examples.set("flexrepeat", "flexbox/flexbox-repeater");
|
||||
|
||||
let viewModel = new FlexboxMainPageViewModel(wrapLayout, examples);
|
||||
page.bindingContext = viewModel;
|
||||
}
|
||||
|
||||
export class FlexboxMainPageViewModel extends MianPageViewModel {
|
||||
constructor(container: WrapLayout, examples: Map<string, string>) {
|
||||
super(container, examples);
|
||||
}
|
||||
}
|
6
apps/app/ui-tests-app/flexbox/flexbox-main-page.xml
Normal file
6
apps/app/ui-tests-app/flexbox/flexbox-main-page.xml
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<Page loaded="pageLoaded">
|
||||
<ScrollView>
|
||||
<WrapLayout id="wrapLayout"/>
|
||||
</ScrollView>
|
||||
</Page>
|
8
apps/app/ui-tests-app/flexbox/flexbox-repeater.ts
Normal file
8
apps/app/ui-tests-app/flexbox/flexbox-repeater.ts
Normal file
@ -0,0 +1,8 @@
|
||||
export function pageLoaded(args) {
|
||||
var page = args.object;
|
||||
var itemsArray = [];
|
||||
for (var i = 1; i <= 55; i++) {
|
||||
itemsArray.push({ number: "item " + i });
|
||||
}
|
||||
page.bindingContext = { items: itemsArray };
|
||||
}
|
14
apps/app/ui-tests-app/flexbox/flexbox-repeater.xml
Normal file
14
apps/app/ui-tests-app/flexbox/flexbox-repeater.xml
Normal file
@ -0,0 +1,14 @@
|
||||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<Page loaded="pageLoaded">
|
||||
<Repeater items="{{ items }}">
|
||||
<Repeater.itemsLayout>
|
||||
<FlexboxLayout flexDirection="column" flexWrap="wrap" justifyContent="center" alignItems="center" alignContent="stretch" />
|
||||
</Repeater.itemsLayout>
|
||||
<Repeater.itemTemplate>
|
||||
<FlexboxLayout flexDirection="row">
|
||||
<Label text="{{ number }}" backgroundColor="lightgreen" />
|
||||
<Label text="{{ number }}" backgroundColor="lightblue" />
|
||||
</FlexboxLayout>
|
||||
</Repeater.itemTemplate>
|
||||
</Repeater>
|
||||
</Page>
|
@ -1,4 +1,4 @@
|
||||
import {FlexboxLayout} from "ui/layouts/flexbox-layout";
|
||||
import { FlexboxLayout } from "ui/layouts/flexbox-layout";
|
||||
|
||||
function set(what: string) {
|
||||
return function(args) {
|
||||
|
@ -3,6 +3,7 @@
|
||||
<GridLayout class="control" columns="auto, *" rows="25, 15, 25, 15, 25, 15, 15, 15, 15, 25, 15">
|
||||
|
||||
<Label row="0" text="flexDirection" verticalAlignment="center" />
|
||||
<!--default=row-->
|
||||
<FlexboxLayout row="0" col="1">
|
||||
<Button text="row" tap="flexDirection" flexGrow="1" automationText="flexDirection-row" />
|
||||
<Button text="row-reverse" tap="flexDirection" flexGrow="1" automationText="flexDirection-row-reverse" />
|
||||
@ -11,6 +12,7 @@
|
||||
</FlexboxLayout>
|
||||
|
||||
<Label row="1" text="flexWrap" verticalAlignment="center" />
|
||||
<!--default=nowrap-->
|
||||
<FlexboxLayout row="1" col="1">
|
||||
<Button text="nowrap" tap="flexWrap" flexGrow="1" automationText="flexWrap-nowrap" />
|
||||
<Button text="wrap" tap="flexWrap" flexGrow="1" automationText="flexWrap-wrap" />
|
||||
@ -18,6 +20,7 @@
|
||||
</FlexboxLayout>
|
||||
|
||||
<Label row="2" text="justifyContent" verticalAlignment="center" />
|
||||
<!--defeault=flex-start-->
|
||||
<FlexboxLayout row="2" col="1">
|
||||
<Button text="flex-start" tap="justifyContent" flexGrow="1" automationText="justifyContent-flex-start" />
|
||||
<Button text="flex-end" tap="justifyContent" flexGrow="1" automationText="justifyContent-flex-end" />
|
||||
@ -27,6 +30,7 @@
|
||||
</FlexboxLayout>
|
||||
|
||||
<Label row="3" text="alignItems" verticalAlignment="center" />
|
||||
<!--default=stretch-->
|
||||
<FlexboxLayout row="3" col="1">
|
||||
<Button text="flex-start" tap="alignItems" flexGrow="1" automationText="alignItems-flex-start" />
|
||||
<Button text="flex-end" tap="alignItems" flexGrow="1" automationText="alignItems-flex-end" />
|
||||
@ -36,6 +40,7 @@
|
||||
</FlexboxLayout>
|
||||
|
||||
<Label row="4" text="alignContent" verticalAlignment="center" />
|
||||
<!--default=stretch-->
|
||||
<FlexboxLayout row="4" col="1">
|
||||
<Button text="flex-start" tap="alignContent" flexGrow="1" automationText="alignContent-flex-start" />
|
||||
<Button text="flex-end" tap="alignContent" flexGrow="1" automationText="alignContent-flex-end" />
|
||||
@ -48,6 +53,7 @@
|
||||
<Label row="5" colSpan="2" text="--- selected item properties ---" />
|
||||
|
||||
<Label text="order" row="6" />
|
||||
<!--default=1-->
|
||||
<FlexboxLayout row="6" col="1">
|
||||
<Button text="0" tap="order" flexGrow="1" automationText="order-0" />
|
||||
<Button text="1" tap="order" flexGrow="1" automationText="order-1" />
|
||||
@ -57,6 +63,7 @@
|
||||
</FlexboxLayout>
|
||||
|
||||
<Label text="flexGrow" row="7" />
|
||||
<!--default=0-->
|
||||
<FlexboxLayout row="7" col="1">
|
||||
<Button text="0" tap="flexGrow" flexGrow="1" automationText="flexGrow-0" />
|
||||
<Button text="1" tap="flexGrow" flexGrow="1" automationText="flexGrow-1" />
|
||||
@ -66,6 +73,7 @@
|
||||
</FlexboxLayout>
|
||||
|
||||
<Label text="flexShrink" row="8" />
|
||||
<!--default=1-->
|
||||
<FlexboxLayout row="8" col="1">
|
||||
<Button text="0" tap="flexShrink" flexGrow="1" automationText="flexShrink-0" />
|
||||
<Button text="1" tap="flexShrink" flexGrow="1" automationText="flexShrink-1" />
|
||||
@ -75,6 +83,7 @@
|
||||
</FlexboxLayout>
|
||||
|
||||
<Label row="9" text="alignSelf" verticalAlignment="center" />
|
||||
<!--defaut=stretch-->
|
||||
<FlexboxLayout row="9" col="1">
|
||||
<Button text="auto" tap="alignSelf" flexGrow="1" automationText="alignSelf-auto" />
|
||||
<Button text="flex-start" tap="alignSelf" flexGrow="1" automationText="alignSelf-flex-start" />
|
||||
@ -108,6 +117,7 @@
|
||||
<Label text="column" tap="select" backgroundColor="lightblue" automationText="itemColumn-2" />
|
||||
<Label text="column-reverse" tap="select" backgroundColor="lightsalmon" automationText="itemColumnReverse-2" />
|
||||
-->
|
||||
|
||||
</FlexboxLayout>
|
||||
</GridLayout>
|
||||
</Page>
|
@ -27,6 +27,7 @@ export function pageLoaded(args: EventData) {
|
||||
examples.set("layouts", "layouts/main-page");
|
||||
examples.set("pages-events", "pages/main-page");
|
||||
examples.set("webview", "web-view/main-page");
|
||||
examples.set("flexbox", "flexbox/flexbox-main-page");
|
||||
|
||||
examples.set("modalview", "modal-view/modal-view");
|
||||
examples.set("dialogs", "dialogs/dialogs");
|
||||
@ -35,7 +36,6 @@ export function pageLoaded(args: EventData) {
|
||||
examples.set("animeBG", "animations/background");
|
||||
examples.set("transitions", "transitions/page0");
|
||||
examples.set("segStyle", "segmented-bar/all");
|
||||
examples.set("flexbox", "flexbox/flexbox");
|
||||
examples.set("list-view", "list-view/list-view");
|
||||
examples.set("issues", "issues/main-page");
|
||||
|
||||
|
Reference in New Issue
Block a user