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

Padding

Browse Source
This commit is contained in:
Rossen Hristov
2016-12-22 14:43:31 +02:00
parent 2d05e6ac6f
commit 0ec9950d46
6 changed files with 89 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
apps/app/ui-tests-app/css/padding-and-border.css
View File

@@ -1,19 +1,20 @@
#padding {
padding: 10;
.padding {
padding: 5;
}
#border {
border-width: 10;
border-color: black;
.border {
border-width: 5;
}
#background-color {
.green {
background-color: green;
}
.yellow {
background-color: yellow;
}
/*#background-image {
background-image: url('~/ui-tests-app/pages/test2.png');
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
}*/
Label, TextField, TextView, Button {
text-align: left;
margin: 1;
}

27
apps/app/ui-tests-app/css/padding-and-border.ts
View File

@@ -1,27 +0,0 @@
import { EventData, View, TextBase } from "ui/text-base";
import { LayoutBase } from "ui/layouts/layout-base";
let cssClassNames = [
"",
"padding",
"border",
"background-color",
"padding border",
"padding background-color",
"border background-color",
"padding border background-color"
];
let currentIndex = 0;
export function onChangeCSS(args: EventData){
let page = (<View>args.object).page;
let container = <LayoutBase>page.getViewById<LayoutBase>("container");
currentIndex++;
let newClassName = cssClassNames[currentIndex % cssClassNames.length];
for(let i = 0, length = container.getChildrenCount(); i < length; i++){
let child = container.getChildAt(i);
child.className = newClassName;
}
(<TextBase>page.getViewById<TextBase>("info")).text = newClassName || "none";
}

36
apps/app/ui-tests-app/css/padding-and-border.xml
View File

@@ -1,15 +1,25 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" id="padding-and-border-page">
<StackLayout>
<Button id="changeButton" tap="onChangeCSS"/>
<TextView id="info" isEnabled="false" isUserInteractionEnabled="false"/>
<StackLayout id="container" style.backgroundColor="gray">
<Label id="label" text="Label"/>
<TextField id="textField" text="TextField"/>
<TextView id="textView" text="TextView"/>
<Button id="button" text="Button"/>
<StackLayout id="stack-layout">
<StackLayout id="child-of-stack-layout" width="50" height="50" style.backgroundColor="red"></StackLayout>
</StackLayout>
</StackLayout>
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
<StackLayout id="container" class="padding green">
<Label text="Label padding" class="padding"/>
<TextField text="TextField padding" class="padding"/>
<TextView text="TextView padding" class="padding"/>
<Button text="Button padding" class="padding"/>
<Label text="Label padding yellow" class="padding yellow"/>
<TextField text="TextField padding yellow" class="padding yellow"/>
<TextView text="TextView padding yellow" class="padding yellow"/>
<Button text="Button padding yellow" class="padding yellow"/>
<Label text="Label border" class="border"/>
<TextField text="TextField border" class="border"/>
<TextView text="TextView border" class="border"/>
<Button text="Button border" class="border"/>
<Label text="Label padding border" class="padding border"/>
<TextField text="TextField padding border" class="padding border"/>
<TextView text="TextView padding border" class="padding border"/>
<Button text="Button padding border" class="padding border"/>
</StackLayout>
</Page>