mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-08-17 21:01:34 +08:00
50 lines
2.9 KiB
TypeScript
50 lines
2.9 KiB
TypeScript
import * as pages from '@nativescript/core/ui/page';
|
|
import * as button from '@nativescript/core/ui/button';
|
|
|
|
import { GridLayout } from '@nativescript/core/ui/layouts/grid-layout';
|
|
|
|
let testIndex = 0;
|
|
const tests = [
|
|
{ name: 'black hex color only', background: '#000000' },
|
|
{ name: 'yellow hex color only', background: '#ffff00' },
|
|
{ name: 'blue color only', background: 'blue' },
|
|
|
|
{ name: 'repeat image only', background: 'url("~/resources/images/icon.png")' },
|
|
{ name: 'linear gradient red-blue only', background: 'linear-gradient(to bottom, red, blue)' },
|
|
|
|
{ name: '[straight] image only, no-repeat ', background: 'url("~/resources/images/icon.png") no-repeat' },
|
|
{ name: '[straight] green color, image, no-repeat', background: 'green url("~/resources/images/icon.png") no-repeat' },
|
|
{ name: '[straight] yellow hex color, image, no-repeat, position pixels', background: '#ffff00 url("~/resources/images/icon.png") no-repeat 200px 200px' },
|
|
{ name: '[straight] yellow hex color, image, repeat-y, position pixels', background: '#ffff00 url("~/resources/images/icon.png") repeat-y 100px 500px' },
|
|
{ name: '[straight] orange hex color, image, no-repeat, position percents', background: '#F9791F url("~/resources/images/icon.png") no-repeat 100% 100%' },
|
|
{ name: '[straight] green color, image, repeat-x, position percents', background: 'green url("~/resources/images/icon.png") repeat-x 100% 100%' },
|
|
{ name: '[straight] blue color, image, repeat-x, position', background: 'blue url("~/resources/images/icon.png") repeat-x 150 150' },
|
|
|
|
{ name: '[shuffle] no-repeat, image only', background: 'no-repeat url("~/resources/images/icon.png")' },
|
|
{ name: '[shuffle] no-repeat, green color, image, ', background: 'no-repeat green url("~/resources/images/icon.png")' },
|
|
{ name: '[shuffle] yellow hex color, position pixels, image, no-repeat', background: '#ffff00 200px 200px url("~/resources/images/icon.png") no-repeat' },
|
|
{ name: '[shuffle] image, repeat-y, yellow hex color, position pixels', background: 'url("~/resources/images/icon.png") repeat-y #ffff00 100px 500px' },
|
|
{ name: '[shuffle] position percents, image, no-repeat, orange hex color', background: '100% 100% url("~/resources/images/icon.png") no-repeat #F9791F' },
|
|
{ name: '[shuffle] position percents, image, repeat-x, green color', background: '100% 100% url("~/resources/images/icon.png") repeat-x green' },
|
|
{ name: '[shuffle] image, repeat-x, position, blue color,', background: 'url("~/resources/images/icon.png") repeat-x 150 150 blue' },
|
|
];
|
|
|
|
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.background = tests[testIndex].background;
|
|
|
|
testIndex = testIndex < tests.length - 1 ? ++testIndex : 0;
|
|
}
|