mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-11-05 13:26:48 +08:00
Add flexbox, we have to figure out layout params
This commit is contained in:
Panayot Cankov
28
apps/app/ui-tests-app/flexbox/flexbox.css
Normal file
28
apps/app/ui-tests-app/flexbox/flexbox.css
Normal file
@@ -0,0 +1,28 @@
|
||||
@keyframes select {
|
||||
0%, 100% {
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.4, 1.4);
|
||||
}
|
||||
}
|
||||
#container>Label {
|
||||
border-width: 1;
|
||||
border-color: black;
|
||||
border-radius: 5;
|
||||
}
|
||||
#container>Label[selected="yes"] {
|
||||
border-color: yellow;
|
||||
/* animation-name: select;
|
||||
animation-duration: 0.2s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-iteration-count: 1;*/
|
||||
}
|
||||
|
||||
.control {
|
||||
font-size: 11;
|
||||
}
|
||||
.control Button {
|
||||
padding: 2;
|
||||
margin: 2;
|
||||
}
|
||||
55
apps/app/ui-tests-app/flexbox/flexbox.ts
Normal file
55
apps/app/ui-tests-app/flexbox/flexbox.ts
Normal file
@@ -0,0 +1,55 @@
|
||||
import {isAndroid} from "platform";
|
||||
import * as flexbox from "ui/layouts/flexbox-layout";
|
||||
|
||||
function set(what: string) {
|
||||
return function(args) {
|
||||
args.object.page.getViewById("container")[what] = args.object.text;
|
||||
}
|
||||
}
|
||||
|
||||
export const flexDirection = set("flexDirection");
|
||||
export const flexWrap = set("flexWrap");
|
||||
export const justifyContent = set("justifyContent");
|
||||
export const alignItems = set("alignItems");
|
||||
export const alignContent = set("alignContent");
|
||||
|
||||
let lastSelection = null;
|
||||
export function select(args) {
|
||||
console.log("Select: " + args.object);
|
||||
lastSelection = args.object;
|
||||
|
||||
if (isAndroid) {
|
||||
let layoutParams = lastSelection.android.getLayoutParams();
|
||||
console.log("Selection: " + lastSelection + ": " + layoutParams);
|
||||
console.log(" - margin: " + layoutParams.topMargin + " " + layoutParams.rightMargin + " " + layoutParams.bottomMargin + " " + layoutParams.leftMargin);
|
||||
}
|
||||
}
|
||||
|
||||
export function order({object}) {
|
||||
if (!lastSelection) {
|
||||
return;
|
||||
}
|
||||
let value = object.text;
|
||||
console.log("Set order " + value + " " + lastSelection);
|
||||
flexbox.FlexboxLayout.setOrder(lastSelection, object.text);
|
||||
}
|
||||
|
||||
export function flexGrow({object}) {
|
||||
if (!lastSelection) {
|
||||
return;
|
||||
}
|
||||
let value = object.text;
|
||||
console.log("Set flexGrow " + value + " " + lastSelection);
|
||||
flexbox.FlexboxLayout.setFlexGrow(lastSelection, object.text);
|
||||
}
|
||||
|
||||
export function flexShrink({object}) {
|
||||
if (!lastSelection) {
|
||||
return;
|
||||
}
|
||||
let value = object.text;
|
||||
console.log("Set flexShrink " + value + " " + lastSelection);
|
||||
flexbox.FlexboxLayout.setFlexShrink(lastSelection, object.text);
|
||||
}
|
||||
|
||||
// TODO: Align self
|
||||
119
apps/app/ui-tests-app/flexbox/flexbox.xml
Normal file
119
apps/app/ui-tests-app/flexbox/flexbox.xml
Normal file
@@ -0,0 +1,119 @@
|
||||
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
|
||||
<GridLayout rows="auto, *" backgroundColor="gray">
|
||||
<GridLayout class="control" columns="auto, *" rows="30, 30, 30, 30, 30, 25, 30, 30, 30, 30">
|
||||
<Label row="0" text="FlexDirection" verticalAlignment="center" />
|
||||
<StackLayout row="0" col="1" orientation="horizontal">
|
||||
<Button text="row" tap="flexDirection" />
|
||||
<Button text="row-reverse" tap="flexDirection" />
|
||||
<Button text="column" tap="flexDirection" />
|
||||
<Button text="column-reverse" tap="flexDirection" />
|
||||
</StackLayout>
|
||||
|
||||
<Label row="1" text="FlexWrap" verticalAlignment="center" />
|
||||
<StackLayout row="1" col="1" orientation="horizontal">
|
||||
<Button text="nowrap" tap="flexWrap" />
|
||||
<Button text="wrap" tap="flexWrap" />
|
||||
<Button text="wrap-reverse" tap="flexWrap" />
|
||||
</StackLayout>
|
||||
|
||||
<!-- TODO: Stretch seems to be default in JavaScript, but not default in Java -->
|
||||
<Label row="2" text="JustifyContent" verticalAlignment="center" />
|
||||
<StackLayout row="2" col="1" orientation="horizontal">
|
||||
<Button text="flex-start" tap="justifyContent" />
|
||||
<Button text="flex-end" tap="justifyContent" />
|
||||
<Button text="center" tap="justifyContent" />
|
||||
<Button text="space-between" tap="justifyContent" />
|
||||
<Button text="space-around" tap="justifyContent" />
|
||||
</StackLayout>
|
||||
|
||||
<Label row="3" text="AlignItems" verticalAlignment="center" />
|
||||
<StackLayout row="3" col="1" orientation="horizontal">
|
||||
<Button text="flex-start" tap="alignItems" />
|
||||
<Button text="flex-end" tap="alignItems" />
|
||||
<Button text="center" tap="alignItems" />
|
||||
<Button text="baseline" tap="alignItems" />
|
||||
<Button text="stretch" tap="alignItems" />
|
||||
</StackLayout>
|
||||
|
||||
<Label row="4" text="AlignContent" verticalAlignment="center" />
|
||||
<StackLayout row="4" col="1" orientation="horizontal">
|
||||
<Button text="flex-start" tap="alignContent" />
|
||||
<Button text="flex-end" tap="alignContent" />
|
||||
<Button text="center" tap="alignContent" />
|
||||
<Button text="space-between" tap="alignContent" />
|
||||
<Button text="space-around" tap="alignContent" />
|
||||
<Button text="stretch" tap="alignContent" />
|
||||
</StackLayout>
|
||||
|
||||
<Label row="5" colSpan="2" text="--- selected item properties ---" />
|
||||
|
||||
<Label text="order" row="6" />
|
||||
<StackLayout row="6" col="1" orientation="horizontal">
|
||||
<Button text="0" tap="order" />
|
||||
<Button text="1" tap="order" />
|
||||
<Button text="2" tap="order" />
|
||||
<Button text="3" tap="order" />
|
||||
<Button text="4" tap="order" />
|
||||
</StackLayout>
|
||||
|
||||
<Label text="flex-grow" row="7" />
|
||||
<StackLayout row="7" col="1" orientation="horizontal">
|
||||
<Button text="0" tap="flexGrow" />
|
||||
<Button text="1" tap="flexGrow" />
|
||||
<Button text="2" tap="flexGrow" />
|
||||
<Button text="3" tap="flexGrow" />
|
||||
<Button text="4" tap="flexGrow" />
|
||||
</StackLayout>
|
||||
|
||||
<Label text="flex-shrink" row="8" />
|
||||
<StackLayout row="8" col="1" orientation="horizontal">
|
||||
<Button text="0" tap="flexShrink" />
|
||||
<Button text="1" tap="flexShrink" />
|
||||
<Button text="2" tap="flexShrink" />
|
||||
<Button text="3" tap="flexShrink" />
|
||||
<Button text="4" tap="flexShrink" />
|
||||
</StackLayout>
|
||||
|
||||
<!--<Label text="margin" row="9" />
|
||||
<StackLayout row="9" col="1" orientation="horizontal">
|
||||
<TextField text="{{margin}}" width="100" />
|
||||
<Label text="width" />
|
||||
<TextField text="{{width}}" width="100" />
|
||||
<Label text="height" />
|
||||
<TextField text="{{height}}" width="100" />
|
||||
</StackLayout>-->
|
||||
|
||||
|
||||
<!-- TODO: Align self -->
|
||||
|
||||
</GridLayout>
|
||||
<FlexboxLayout id="container" row="1" backgroundColor="white" margin="10">
|
||||
<!-- TODO: horizontalAlignment and verticalAlignment should be handled somehow by treating the items with proper layout params -->
|
||||
|
||||
<Label text="row" backgroundColor="#EEEEEE" margin="20" padding="20" tap="select" />
|
||||
<Label text="row-reverse" backgroundColor="#DDDDDD" fontSize="8" tap="select" />
|
||||
<Label text="column" backgroundColor="#CCCCCC" tap="select" />
|
||||
<Label text="column-reverse" backgroundColor="#BBBBBB" tap="select" />
|
||||
<Label text="row" backgroundColor="#AAAAAA" tap="select" />
|
||||
<Label text="row-reverse" backgroundColor="#EEEEEE" fontSize="8" tap="select" />
|
||||
<Label text="column" backgroundColor="#DDDDDD" tap="select" />
|
||||
<Label text="column-reverse" backgroundColor="#CCCCCC" tap="select" />
|
||||
<Label text="row" backgroundColor="#BBBBBB" tap="select" />
|
||||
<Label text="row-reverse" backgroundColor="#AAAAAA" fontSize="8" tap="select" />
|
||||
<Label text="column" backgroundColor="#EEEEEE" tap="select" />
|
||||
<Label text="column-reverse" backgroundColor="#DDDDDD" tap="select" />
|
||||
<Label text="row" backgroundColor="#CCCCCC" tap="select" />
|
||||
<Label text="row-reverse" backgroundColor="#BBBBBB" fontSize="8" tap="select" />
|
||||
<Label text="column" backgroundColor="#AAAAAA" tap="select" />
|
||||
<Label text="column-reverse" backgroundColor="#EEEEEE" tap="select" />
|
||||
<Label text="row" backgroundColor="#DDDDDD" tap="select" />
|
||||
<Label text="row-reverse" backgroundColor="#CCCCCC" fontSize="8" tap="select" />
|
||||
<Label text="column" backgroundColor="#BBBBBB" tap="select" />
|
||||
<Label text="column-reverse" backgroundColor="#AAAAAA" tap="select" />
|
||||
<Label text="row" backgroundColor="#EEEEEE" tap="select" />
|
||||
<Label text="row-reverse" backgroundColor="#DDDDDD" fontSize="8" tap="select" />
|
||||
<Label text="column" backgroundColor="#CCCCCC" tap="select" />
|
||||
<Label text="column-reverse" backgroundColor="#BBBBBB" tap="select" />
|
||||
</FlexboxLayout>
|
||||
</GridLayout>
|
||||
</Page>
|
||||
@@ -35,6 +35,7 @@ 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("listview_binding", "pages/listview_binding");
|
||||
//examples.set("textfield", "text-field/text-field");
|
||||
|
||||
Reference in New Issue
Block a user