Add a flexbox-repeater test page

This commit is contained in:
vchimev
2016-11-02 13:50:40 +02:00
parent 4e977f0c4a
commit fc9843d800
7 changed files with 64 additions and 3 deletions

View 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);
}
}

View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8" ?>
<Page loaded="pageLoaded">
<ScrollView>
<WrapLayout id="wrapLayout"/>
</ScrollView>
</Page>

View 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 };
}

View 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>

View File

@ -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) {

View File

@ -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>

View File

@ -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");