mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-08-17 04:41:36 +08:00
5a83a1c858
* feat(ios): Added support for css gradients. * feat(android): Added support for css gradients. * fix: Fixed gradient borders on ios * fix(gradient): added backgroundGradient to View and Style. * fix(ios-gradients): fixed ios gradients covering view content. * test(gradient): Added ui app tests for background gradients. * test(gradient): Added a test ensuring background gradient property is applied to style. * style(gradient): Fixed tslint errors. * fix(gradient): Removed the background-gradient property and added the gradient to background-image. * style: fixed a consecutive blank line tslint error. * fix(tests): fixed the bug that was causing tests to fail. * chore(linear-gradient): fix equality comparer * test(gradient): add linear gradients test app * chore(tslint): update with latest tslint rules
41 lines
1.9 KiB
TypeScript
41 lines
1.9 KiB
TypeScript
import * as pages from "tns-core-modules/ui/page";
|
|
import { EventData } from "tns-core-modules/data/observable";
|
|
import * as button from "tns-core-modules/ui/button";
|
|
|
|
import { GridLayout } from "tns-core-modules/ui/layouts/grid-layout";
|
|
|
|
let testIndex = 0;
|
|
const tests = [
|
|
{ name: "black-blue only", backgroundImage: "linear-gradient(to bottom, black, blue)"},
|
|
{ name: "to bottom green-blue", backgroundImage: "linear-gradient(to bottom, green, blue)"},
|
|
{ name: "to left yellow-blue", backgroundImage: "linear-gradient(to left, yellow, green)"},
|
|
{ name: "to right yellow-blue", backgroundImage: "linear-gradient(to right, yellow, green)"},
|
|
{ name: "-45deg green-blue", backgroundImage: "linear-gradient(-45deg, green, blue)"},
|
|
{ name: "45deg green-blue", backgroundImage: "linear-gradient(45deg, green, blue)"},
|
|
|
|
{ name: "black-blue-pink only", backgroundImage: "linear-gradient(to bottom, black, blue, pink)"},
|
|
{ name: "to bottom green-blue-pink", backgroundImage: "linear-gradient(to bottom, green, blue, pink)"},
|
|
{ name: "to left yellow-blue-pink", backgroundImage: "linear-gradient(to left, yellow, green, pink)"},
|
|
{ name: "to right yellow-blue-pink", backgroundImage: "linear-gradient(to right, yellow, green, pink)"},
|
|
{ name: "-45deg green-blue-pink", backgroundImage: "linear-gradient(-45deg, green, blue, pink)"},
|
|
{ name: "45deg green-blue-pink", backgroundImage: "linear-gradient(45deg, green, blue, pink)"},
|
|
]
|
|
|
|
export function onLoaded(args) {
|
|
applyNextStyle(args);
|
|
}
|
|
|
|
export function onButtonTap(args) {
|
|
applyNextStyle(args);
|
|
}
|
|
|
|
function applyNextStyle(args) {
|
|
let page = <pages.Page>args.object.page;
|
|
let btn = <button.Button>args.object;
|
|
let gridElement = <GridLayout>page.getViewById("Container");
|
|
|
|
btn.text = tests[testIndex].name;
|
|
gridElement.backgroundImage = tests[testIndex].backgroundImage;
|
|
|
|
testIndex = testIndex < tests.length - 1 ? ++testIndex : 0;
|
|
} |