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

Update flexbox test page

Browse Source
This commit is contained in:
vchimev
2016-11-10 17:15:53 +02:00
parent 0029a8afcc
commit 9483b54f92
2 changed files with 43 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
apps/app/ui-tests-app/flexbox/flexbox.ts
View File

@@ -2,8 +2,11 @@ import { FlexboxLayout } from "ui/layouts/flexbox-layout";
function set(what: string) { function set(what: string) {
return function(args) { return function(args) {
args.object.page.getViewById("container")[what] = args.object.text; // args.object.page.getViewById("container")[what] = args.object.text;
// console.log(args.object.text); let containerCss = " #container { " + args.object.tag + " }" ;
// console.log(containerCss);
args.object.page.addCss(containerCss);
// console.log(args.object.page.css);
} }
} }

48
apps/app/ui-tests-app/flexbox/flexbox.xml
View File

@@ -5,49 +5,49 @@
<Label row="0" text="flexDirection" verticalAlignment="center" /> <Label row="0" text="flexDirection" verticalAlignment="center" />
<!--default=row--> <!--default=row-->
<FlexboxLayout row="0" col="1"> <FlexboxLayout row="0" col="1">
<Button text="row" tap="flexDirection" flexGrow="1" automationText="flexDirection-row" /> <Button text="row" tag="flex-direction: row;" tap="flexDirection" flexGrow="1" automationText="flexDirection-row" />
<Button text="row-reverse" tap="flexDirection" flexGrow="1" automationText="flexDirection-row-reverse" /> <Button text="row-reverse" tag="flex-direction: row-reverse;" tap="flexDirection" flexGrow="1" automationText="flexDirection-row-reverse" />
<Button text="column" tap="flexDirection" flexGrow="1" automationText="flexDirection-column" /> <Button text="column" tag="flex-direction: column;" tap="flexDirection" flexGrow="1" automationText="flexDirection-column" />
<Button text="column-reverse" tap="flexDirection" flexGrow="1" automationText="flexDirection-column-reverse" /> <Button text="column-reverse" tag="flex-direction: column-reverse;" tap="flexDirection" flexGrow="1" automationText="flexDirection-column-reverse" />
</FlexboxLayout> </FlexboxLayout>
<Label row="1" text="flexWrap" verticalAlignment="center" /> <Label row="1" text="flexWrap" verticalAlignment="center" />
<!--default=nowrap--> <!--default=nowrap-->
<FlexboxLayout row="1" col="1"> <FlexboxLayout row="1" col="1">
<Button text="nowrap" tap="flexWrap" flexGrow="1" automationText="flexWrap-nowrap" /> <Button text="nowrap" tag="flex-wrap: nowrap;" tap="flexWrap" flexGrow="1" automationText="flexWrap-nowrap" />
<Button text="wrap" tap="flexWrap" flexGrow="1" automationText="flexWrap-wrap" /> <Button text="wrap" tag="flex-wrap: wrap;" tap="flexWrap" flexGrow="1" automationText="flexWrap-wrap" />
<Button text="wrap-reverse" tap="flexWrap" flexGrow="1" automationText="flexWrap-wrap-reverse" /> <Button text="wrap-reverse" tag="flex-wrap: wrap-reverse;" tap="flexWrap" flexGrow="1" automationText="flexWrap-wrap-reverse" />
</FlexboxLayout> </FlexboxLayout>
<Label row="2" text="justifyContent" verticalAlignment="center" /> <Label row="2" text="justifyContent" verticalAlignment="center" />
<!--defeault=flex-start--> <!--defeault=flex-start-->
<FlexboxLayout row="2" col="1"> <FlexboxLayout row="2" col="1">
<Button text="flex-start" tap="justifyContent" flexGrow="1" automationText="justifyContent-flex-start" /> <Button text="flex-start" tag="justify-content: flex-start;" tap="justifyContent" flexGrow="1" automationText="justifyContent-flex-start" />
<Button text="flex-end" tap="justifyContent" flexGrow="1" automationText="justifyContent-flex-end" /> <Button text="flex-end" tag="justify-content: flex-end;" tap="justifyContent" flexGrow="1" automationText="justifyContent-flex-end" />
<Button text="center" tap="justifyContent" flexGrow="1" automationText="justifyContent-center" /> <Button text="center" tag="justify-content: center;" tap="justifyContent" flexGrow="1" automationText="justifyContent-center" />
<Button text="space-between" tap="justifyContent" flexGrow="1" automationText="justifyContent-space-between" /> <Button text="space-between" tag="justify-content: space-between;" tap="justifyContent" flexGrow="1" automationText="justifyContent-space-between" />
<Button text="space-around" tap="justifyContent" flexGrow="1" automationText="justifyContent-space-around" /> <Button text="space-around" tag="justify-content: space-around;" tap="justifyContent" flexGrow="1" automationText="justifyContent-space-around" />
</FlexboxLayout> </FlexboxLayout>
<Label row="3" text="alignItems" verticalAlignment="center" /> <Label row="3" text="alignItems" verticalAlignment="center" />
<!--default=stretch--> <!--default=stretch-->
<FlexboxLayout row="3" col="1"> <FlexboxLayout row="3" col="1">
<Button text="flex-start" tap="alignItems" flexGrow="1" automationText="alignItems-flex-start" /> <Button text="flex-start" tag="align-items: flex-start;" tap="alignItems" flexGrow="1" automationText="alignItems-flex-start" />
<Button text="flex-end" tap="alignItems" flexGrow="1" automationText="alignItems-flex-end" /> <Button text="flex-end" tag="align-items: flex-end;" tap="alignItems" flexGrow="1" automationText="alignItems-flex-end" />
<Button text="center" tap="alignItems" flexGrow="1" automationText="alignItems-center" /> <Button text="center" tag="align-items: center;" tap="alignItems" flexGrow="1" automationText="alignItems-center" />
<Button text="baseline" tap="alignItems" flexGrow="1" automationText="alignItems-baseline" /> <Button text="baseline" tag="align-items: baseline;" tap="alignItems" flexGrow="1" automationText="alignItems-baseline" />
<Button text="stretch" tap="alignItems" flexGrow="1" automationText="alignItems-stretch" /> <Button text="stretch" tag="align-items: stretch;" tap="alignItems" flexGrow="1" automationText="alignItems-stretch" />
</FlexboxLayout> </FlexboxLayout>
<Label row="4" text="alignContent" verticalAlignment="center" /> <Label row="4" text="alignContent" verticalAlignment="center" />
<!--default=stretch--> <!--default=stretch-->
<FlexboxLayout row="4" col="1"> <FlexboxLayout row="4" col="1">
<Button text="flex-start" tap="alignContent" flexGrow="1" automationText="alignContent-flex-start" /> <Button text="flex-start" tag="align-content: flex-start;" tap="alignContent" flexGrow="1" automationText="alignContent-flex-start" />
<Button text="flex-end" tap="alignContent" flexGrow="1" automationText="alignContent-flex-end" /> <Button text="flex-end" tag="align-content: flex-end;" tap="alignContent" flexGrow="1" automationText="alignContent-flex-end" />
<Button text="center" tap="alignContent" flexGrow="1" automationText="alignContent-center" /> <Button text="center" tag="align-content: center;" tap="alignContent" flexGrow="1" automationText="alignContent-center" />
<Button text="space-between" tap="alignContent" flexGrow="1" automationText="alignContent-space-between" /> <Button text="space-between" tag="align-content: space-between;" tap="alignContent" flexGrow="1" automationText="alignContent-space-between" />
<Button text="space-around" tap="alignContent" flexGrow="1" automationText="alignContent-space-around" /> <Button text="space-around" tag="align-content: space-around;" tap="alignContent" flexGrow="1" automationText="alignContent-space-around" />
<Button text="stretch" tap="alignContent" flexGrow="1" automationText="alignContent-stretch" /> <Button text="stretch" tag="align-content: stretch;" tap="alignContent" flexGrow="1" automationText="alignContent-stretch" />
</FlexboxLayout> </FlexboxLayout>
<Label row="5" colSpan="2" text="--- selected item properties ---" /> <Label row="5" colSpan="2" text="--- selected item properties ---" />
@@ -101,7 +101,7 @@
</GridLayout> </GridLayout>
<FlexboxLayout id="container" row="1"> <FlexboxLayout id="container" row="1">
<Label text="row" tap="select" margin="10" backgroundColor="yellow" automationText="itemRow-0" /> <Label text="row" tap="select" backgroundColor="yellow" automationText="itemRow-0" margin="10" />
<Label text="row-reverse" tap="select" backgroundColor="lightgreen" automationText="itemRowReverse-0" /> <Label text="row-reverse" tap="select" backgroundColor="lightgreen" automationText="itemRowReverse-0" />
<Label text="column" tap="select" backgroundColor="lightblue" automationText="itemColumn-0" /> <Label text="column" tap="select" backgroundColor="lightblue" automationText="itemColumn-0" />
<Label text="column-reverse" tap="select" backgroundColor="lightsalmon" automationText="itemColumnReverse-0" /> <Label text="column-reverse" tap="select" backgroundColor="lightsalmon" automationText="itemColumnReverse-0" />