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

Add flexbox test pages

Browse Source
This commit is contained in:
vchimev
2016-11-11 16:06:29 +02:00
parent 707070d87f
commit afd2779626
6 changed files with 121 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
apps/app/ui-tests-app/flexbox/flexbox-css.css Normal file
View File

@ -0,0 +1,13 @@
#container {
border-color: black;
border-width: 1;
margin: 5;
}
#container>Label {
border-width: 2;
border-color: black;
border-radius: 5;
}
#container>Label[selected="yes"] {
border-color: gray;
}

21
apps/app/ui-tests-app/flexbox/flexbox-css.ts Normal file
View File

@ -0,0 +1,21 @@
export const flexFlow = applyCss();
function applyCss() {
return function(args) {
// args.object.page.getViewById("container")[what] = args.object.text;
let boxCss = " #container { " + args.object.tag + " }" ;
// console.log(boxCss);
args.object.page.addCss(boxCss);
console.log(args.object.page.css);
}
}
export function applyStyles(args) {
// var css = "#test-element { " + args.object.tag + " }";
console.log(args.object.tag);
args.object.page.addCss(args.object.tag);
}
export function resetTap(args) {
args.object.page.css = "";
}

41
apps/app/ui-tests-app/flexbox/flexbox-css.xml Normal file
View File

@ -0,0 +1,41 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" android:actionBarHidden="true" loaded="onLoaded">
<GridLayout rows="200, *">
<FlexboxLayout style="flex-wrap: wrap;" automationText="container">
<!--container-->
<Button text="f" tag="flex-flow: row-reverse wrap-reverse;" tap="flexFlow" automationText="flexFlow" />
<!--items-->
<Button text="o1" tag="#container { flex-wrap: wrap; } #itemRowReverse-0 { order: 0; } #itemRowReverse-1 { order: 2; }" tap="applyStyles" automationText="o1" />
<Button text="g1" tag="#container { flex-wrap: wrap; } #itemColumnReverse-0 { flex-grow: 1; } #itemColumnReverse-1 { flex-grow: 1; }" tap="applyStyles" automationText="g1" />
<Button text="s1" tag="#container { flex-wrap: nowrap; } #itemColumnReverse-0 { flex-shrink: 0; } #itemColumnReverse-1 { flex-shrink: 0; }" tap="applyStyles" automationText="s1" />
<Button text="a1" tag="#container { flex-wrap: nowrap; } .one { align-self: center; }" tap="applyStyles" automationText="a1" />
<!--flex-->
<Button text="f0" tag="#container { flex-wrap: nowrap; } #itemRowReverse-1 { flex: 0 1; } #itemColumn-1 { flex: 0 1; } #itemColumnReverse-1 { flex: 0 1; }" tap="applyStyles" automationText="f0" />
<Button text="f1" tag="#container { flex-wrap: wrap; } #itemRowReverse-1 { flex: 3; } #itemColumn-1 { flex: 2; } #itemColumnReverse-1 { flex: 1; }" tap="applyStyles" automationText="f1" />
<Button text="f2" tag="#container { flex-wrap: nowrap; } #itemRowReverse-1 { flex: 3 0; } #itemColumn-1 { flex: 2 0; } #itemColumnReverse-1 { flex: 1 0; }" tap="applyStyles" automationText="f2" />
</FlexboxLayout>
<FlexboxLayout id="container" row="1">
<Label text="row" tap="select" backgroundColor="yellow" automationText="itemRow-0" id="itemRow-0" class="zero" margin="10" />
<Label text="row-reverse" tap="select" backgroundColor="lightgreen" automationText="itemRowReverse-0" id="itemRowReverse-0" class="zero" />
<Label text="column" tap="select" backgroundColor="lightblue" automationText="itemColumn-0" id="itemColumn-0" class="zero" />
<Label text="column-reverse" tap="select" backgroundColor="lightsalmon" automationText="itemColumnReverse-0" id="itemColumnReverse-0" class="zero" />
<Label text="row" tap="select" backgroundColor="yellow" automationText="itemRow-1" id="itemRow-1" class="one" />
<Label text="row-reverse" tap="select" backgroundColor="lightgreen" automationText="itemRowReverse-1" id="itemRowReverse-1" class="one" />
<Label text="column" tap="select" backgroundColor="lightblue" automationText="itemColumn-1" id="itemColumn-1" class="one" />
<Label text="column-reverse" tap="select" backgroundColor="lightsalmon" automationText="itemColumnReverse-1" id="itemColumnReverse-1" class="one" />
<!--
<Label text="row" tap="select" backgroundColor="yellow" automationText="itemRow-2" id="itemRow-2" class="two" />
<Label text="row-reverse" tap="select" backgroundColor="lightgreen" automationText="itemRowReverse-2" id="itemRowReverse-2" class="two" />
<Label text="column" tap="select" backgroundColor="lightblue" automationText="itemColumn-2" id="itemColumn-2" class="two" />
<Label text="column-reverse" tap="select" backgroundColor="lightsalmon" automationText="itemColumnReverse-2" id="itemColumnReverse-2" class="two" />
-->
</FlexboxLayout>
</GridLayout>
</Page>

25
apps/app/ui-tests-app/flexbox/flexbox-demo.css Normal file
View File

@ -0,0 +1,25 @@
#body {
flex-flow: row wrap;
}
.flex-item {
align-items: center;
justify-content: center;
}
.header, .footer {
flex: 1;
width: 100%;
background-color: lightgreen;
}
.main {
flex: 5;
height: 60%;
background-color: lightsalmon;
}
.sidebar {
flex: 1;
background-color: lightblue;
}

19
apps/app/ui-tests-app/flexbox/flexbox-demo.xml Normal file
View File

@ -0,0 +1,19 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
<FlexboxLayout id="body">
<FlexboxLayout class="flex-item header">
<Label text="Header" />
</FlexboxLayout>
<FlexboxLayout class="flex-item sidebar">
<Label text="Sidebar" />
</FlexboxLayout>
<FlexboxLayout class="flex-item main">
<Label text="Main" />
</FlexboxLayout>
<FlexboxLayout class="flex-item sidebar">
<Label text="Sidebar" />
</FlexboxLayout>
<FlexboxLayout class="flex-item footer">
<Label text="Footer" />
</FlexboxLayout>
</FlexboxLayout>
</Page>

2
apps/app/ui-tests-app/flexbox/flexbox-main-page.ts
View File

@ -10,6 +10,8 @@ export function pageLoaded(args: EventData) {
let examples = new Map<string, string>(); let examples = new Map<string, string>();
examples.set("flexboxall", "flexbox/flexbox"); examples.set("flexboxall", "flexbox/flexbox");
examples.set("flexboxcss", "flexbox/flexbox-css");
examples.set("flexboxdemo", "flexbox/flexbox-demo");
examples.set("flexrepeat", "flexbox/flexbox-repeater"); examples.set("flexrepeat", "flexbox/flexbox-repeater");
let viewModel = new FlexboxMainPageViewModel(wrapLayout, examples); let viewModel = new FlexboxMainPageViewModel(wrapLayout, examples);