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

className property added cssClass deprecated

Browse Source
This commit is contained in:
Vladimir Enchev
2015-09-18 13:31:08 +03:00
parent 744de9670e
commit d39913b6e6
8 changed files with 61 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/tests/pages/page8.ts
View File

@@ -49,7 +49,7 @@ export function createPage() {
var info = new btns.Button();
info.text = "info";
info.cssClass = "info";
info.className = "info";
info.on(btns.Button.tapEvent, function () {
info.text = "hi: " + counter++;
btn.isEnabled = true;

2
apps/tests/pages/property-bindings.ts
View File

@@ -118,7 +118,7 @@ export function createPage() {
createStringPropertyUI({ name: "style.verticalAlignment", value: "stretch" });
createStringPropertyUI({ name: "margin", value: "20" });
createStringPropertyUI({ name: "cssClass", value: "testClass" });
createStringPropertyUI({ name: "className", value: "testClass" });
page.css = ".testClass { background-color: LightGreen }";
return page;

2
apps/tests/ui/label/label-tests.ts
View File

@@ -195,7 +195,7 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
// ### How to style a label via css class
// ``` JavaScript
label.text = "The quick brown fox jumps over the lazy dog.";
label.cssClass = "title";
label.className = "title";
//// after that all we have to do is to set a similar css entry within parent page css property
//// label.parentPage.css = ".title {background-color: #C6C6C6; color: #10C2B0; font-size: 14;}";
// ```

34
apps/tests/ui/style/style-tests.ts
View File

@@ -139,7 +139,7 @@ export function test_class_selector() {
//// Will be styled
btnWithClass = new buttonModule.Button();
btnWithClass.cssClass = "test";
btnWithClass.className = "test";
//// Won't be styled
btnWithNoClass = new buttonModule.Button();
@@ -172,7 +172,7 @@ export function test_multiple_class_selector() {
//// Will be styled
btnWithClasses = new buttonModule.Button();
btnWithClasses.cssClass = "style1 style2";
btnWithClasses.className = "style1 style2";
var stack = new stackModule.StackLayout();
page.content = stack;
@@ -290,7 +290,7 @@ export function test_class_and_state_selector() {
page.content = testStack;
btn = new buttonModule.Button();
btn.cssClass = "test"
btn.className = "test"
testStack.addChild(btn);
page.css = ".test:pressed { color: red; }";
@@ -315,7 +315,7 @@ export function test_class_and_state_selector_with_multiple_classes() {
page.content = testStack;
btn = new buttonModule.Button();
btn.cssClass = "test otherClass"
btn.className = "test otherClass"
testStack.addChild(btn);
page.css = ".test:pressed { color: red; }";
@@ -392,14 +392,14 @@ export function test_restore_original_values_when_state_is_changed() {
// testPage.content = testStack;
// var btnWithClass = new button.Button();
// btnWithClass.cssClass = "test";
// btnWithClass.className = "test";
// testStack.addChild(btnWithClass);
// var btnWithNoClass = new button.Button();
// testStack.addChild(btnWithNoClass);
// var lblWithClass = new label.Label();
// lblWithClass.cssClass = "test";
// lblWithClass.className = "test";
// testStack.addChild(lblWithClass);
// testPage.css = "button.test { color: red; }";
@@ -431,14 +431,14 @@ export function test_restore_original_values_when_state_is_changed() {
// testPage.content = testStack;
// var btnWithClass = new button.Button();
// btnWithClass.cssClass = "test";
// btnWithClass.className = "test";
// testStack.addChild(btnWithClass);
// var btnWithNoClass = new button.Button();
// testStack.addChild(btnWithNoClass);
// var lblWithClass = new label.Label();
// lblWithClass.cssClass = "test";
// lblWithClass.className = "test";
// testStack.addChild(lblWithClass);
// testPage.css = "button.test:pressed { color: red; }";
@@ -506,7 +506,7 @@ export function test_styles_are_updated_when_cssCalss_is_set() {
helper.assertViewBackgroundColor(btn, "#111111");
helper.assertViewBackgroundColor(btn2, "#111111");
btn.cssClass = "button-class";
btn.className = "button-class";
helper.assertViewBackgroundColor(btn, "#222222");
helper.assertViewBackgroundColor(btn2, "#111111");
@@ -518,7 +518,7 @@ export function test_styles_are_updated_when_cssCalss_is_set() {
export function test_styles_are_updated_when_cssCalss_is_changed() {
var testStack = new stackModule.StackLayout();
var btn = new buttonModule.Button();
btn.cssClass = "button-class";
btn.className = "button-class";
var btn2 = new buttonModule.Button();
testStack.addChild(btn);
testStack.addChild(btn2);
@@ -527,7 +527,7 @@ export function test_styles_are_updated_when_cssCalss_is_changed() {
helper.assertViewBackgroundColor(btn, "#222222");
helper.assertViewBackgroundColor(btn2, "#111111");
btn.cssClass = "button-class-two";
btn.className = "button-class-two";
helper.assertViewBackgroundColor(btn, "#333333");
helper.assertViewBackgroundColor(btn2, "#111111");
@@ -539,7 +539,7 @@ export function test_styles_are_updated_when_cssCalss_is_changed() {
export function test_styles_are_updated_when_cssCalss_is_cleared() {
var testStack = new stackModule.StackLayout();
var btn = new buttonModule.Button();
btn.cssClass = "button-class";
btn.className = "button-class";
var btn2 = new buttonModule.Button();
testStack.addChild(btn);
testStack.addChild(btn2);
@@ -548,7 +548,7 @@ export function test_styles_are_updated_when_cssCalss_is_cleared() {
helper.assertViewBackgroundColor(btn, "#222222");
helper.assertViewBackgroundColor(btn2, "#111111");
btn.cssClass = undefined;
btn.className = undefined;
helper.assertViewBackgroundColor(btn, "#111111");
helper.assertViewBackgroundColor(btn2, "#111111");
@@ -661,11 +661,11 @@ function testSelectorsPrioritiesTemplate(css: string) {
testStack.addChild(btn);
btnWithClass = new buttonModule.Button();
btnWithClass.cssClass = "button-class";
btnWithClass.className = "button-class";
testStack.addChild(btnWithClass);
btnWithId = new buttonModule.Button();
btnWithId.cssClass = "button-class";
btnWithId.className = "button-class";
btnWithId.id = "myButton"
testStack.addChild(btnWithId);
@@ -817,7 +817,7 @@ var invalidCSS = ".invalid { " +
export function test_set_invalid_CSS_values_dont_cause_crash() {
var testButton = new buttonModule.Button();
testButton.text = "Test";
testButton.cssClass = "invalid";
testButton.className = "invalid";
helper.buildUIAndRunTest(testButton, function (views: Array<viewModule.View>) {
TKUnit.assertEqual(30, testButton.style.fontSize);
@@ -834,7 +834,7 @@ var casedCSS = ".cased {" +
export function test_set_mixed_CSS_cases_works() {
var testButton = new buttonModule.Button();
testButton.text = "Test";
testButton.cssClass = "cased";
testButton.className = "cased";
helper.buildUIAndRunTest(testButton, function (views: Array<viewModule.View>) {
TKUnit.assertEqual(30, testButton.style.fontSize);

8
apps/tests/ui/view/view-tests-common.ts
View File

@@ -495,7 +495,11 @@ export var test_binding_id = function () {
}
export var test_binding_cssClass = function () {
property_binding_test("cssClass", "class1", "class2");
property_binding_test("className", "class1", "class2");
}
export var test_binding_cssClass = function () {
property_binding_test("className", "class1", "class2");
}
export var test_binding_style_color = function () {
@@ -661,7 +665,7 @@ export var testBackgroundColor = function () {
export var testBackgroundImage = function () {
var lbl = _createLabelWithBorder();
lbl.cssClass = "myClass";
lbl.className = "myClass";
helper.buildUIAndRunTest(lbl, function (views: Array<viewModule.View>) {
var page = <page.Page>views[1];
page.css = ".myClass { background-image: url('~/logo.png') }";

2
apps/tests/xml-declaration/mymodule/MyControl.ts
View File

@@ -19,6 +19,6 @@ export class MyControl extends stackLayoutModule.StackLayout {
this.addChild(lbl);
this.addChild(btn);
this.cssClass = "MyStackLayout";
this.className = "MyStackLayout";
}
}