How to use the @nativescript/core/ui/layouts/grid-layout.ItemSpec function in @nativescript/core

To help you get started, we’ve selected a few @nativescript/core examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github NativeScript / NativeScript / tests / app / pages / property-bindings.ts View on Github external
export function createPage() {
    var page = new pages.Page();
    var grid = new gridModule.GridLayout();
    grid.addRow(new gridModule.ItemSpec());
    grid.addRow(new gridModule.ItemSpec());
    page.content = grid;

    var count = 0;
    var control = new btns.Button();
    control.text = "test control";
    control.on(btns.Button.tapEvent, (data) => { control.text = "count: " + count++; });
    grid.addChild(control);

    var scrollView = new scroll.ScrollView();
    gridModule.GridLayout.setRow(scrollView, 1);
    grid.addChild(scrollView);
    var stack = new stacks.StackLayout();
    scrollView.content = stack;

    function createNumericPropertyUI(desc: NumericProeprtyDescriptor) {
        var lbl = new labels.Label();
github NativeScript / NativeScript / tests / app / pages / page9.ts View on Github external
export function createPage() {
    var grid = new GridLayout();

    grid.addColumn(new ItemSpec(1, "auto"));
    grid.addColumn(new ItemSpec(1, "star"));

    grid.addRow(new ItemSpec(1, "auto"));
    grid.addRow(new ItemSpec(1, "star"));

    var image = new Image();
    image.stretch = "fill";
    image.verticalAlignment = "bottom";
    image.horizontalAlignment = "center";

    image.imageSource = ImageSource.fromFileSync(__dirname + "/test.png");
    grid.addChild(image);

    var page = new Page();
    page.content = grid;
    page.css = "GridLayout { background-color: pink } image { background-color: green }";

    return page;
}
github NativeScript / NativeScript / tests / app / pages / page10.ts View on Github external
export function createPage() {
    var stack = new StackLayout();
    var grid = new GridLayout();
    stack.addChild(grid);

    grid.addColumn(new ItemSpec(80, "pixel"));
    grid.addColumn(new ItemSpec(1, "star"));
    grid.addRow(new ItemSpec(1, "auto"));
    grid.addRow(new ItemSpec(1, "auto"));

    var defaultImageSource = ImageSource.fromFileSync(__dirname + "/test.png");

    var img = new Image();
    img.src = defaultImageSource;

    img.width = 80;
    img.height = 80;
    img.verticalAlignment = "bottom";
    GridLayout.setRowSpan(img, 2);
    grid.addChild(img);

    var titleLabel = new Label();
    titleLabel.textWrap = true;
    titleLabel.text = "some text goes here";
    GridLayout.setColumn(titleLabel, 1);
github NativeScript / NativeScript / tests / app / pages / page9.ts View on Github external
export function createPage() {
    var grid = new GridLayout();

    grid.addColumn(new ItemSpec(1, "auto"));
    grid.addColumn(new ItemSpec(1, "star"));

    grid.addRow(new ItemSpec(1, "auto"));
    grid.addRow(new ItemSpec(1, "star"));

    var image = new Image();
    image.stretch = "fill";
    image.verticalAlignment = "bottom";
    image.horizontalAlignment = "center";

    image.imageSource = ImageSource.fromFileSync(__dirname + "/test.png");
    grid.addChild(image);

    var page = new Page();
    page.content = grid;
    page.css = "GridLayout { background-color: pink } image { background-color: green }";

    return page;
}
github NativeScript / NativeScript / tests / app / pages / page9.ts View on Github external
export function createPage() {
    var grid = new GridLayout();

    grid.addColumn(new ItemSpec(1, "auto"));
    grid.addColumn(new ItemSpec(1, "star"));

    grid.addRow(new ItemSpec(1, "auto"));
    grid.addRow(new ItemSpec(1, "star"));

    var image = new Image();
    image.stretch = "fill";
    image.verticalAlignment = "bottom";
    image.horizontalAlignment = "center";

    image.imageSource = ImageSource.fromFileSync(__dirname + "/test.png");
    grid.addChild(image);

    var page = new Page();
    page.content = grid;
    page.css = "GridLayout { background-color: pink } image { background-color: green }";
github NativeScript / NativeScript / tests / app / pages / page10.ts View on Github external
export function createPage() {
    var stack = new StackLayout();
    var grid = new GridLayout();
    stack.addChild(grid);

    grid.addColumn(new ItemSpec(80, "pixel"));
    grid.addColumn(new ItemSpec(1, "star"));
    grid.addRow(new ItemSpec(1, "auto"));
    grid.addRow(new ItemSpec(1, "auto"));

    var defaultImageSource = ImageSource.fromFileSync(__dirname + "/test.png");

    var img = new Image();
    img.src = defaultImageSource;

    img.width = 80;
    img.height = 80;
    img.verticalAlignment = "bottom";
    GridLayout.setRowSpan(img, 2);
    grid.addChild(img);

    var titleLabel = new Label();
github NativeScript / NativeScript / tests / app / pages / page11.ts View on Github external
var b2 = new button.Button();
    b2.text = "nested Btn2";
    sp1.addChild(b2);

    grid.addChild(sp1);

    gridModule.GridLayout.setColumn(btn4, 1);
    gridModule.GridLayout.setColumn(btn3, 1);
    gridModule.GridLayout.setRow(btn2, 1);
    gridModule.GridLayout.setRow(btn4, 1);

    grid.addRow(new gridModule.ItemSpec());
    grid.addRow(new gridModule.ItemSpec());
    grid.addColumn(new gridModule.ItemSpec());
    grid.addColumn(new gridModule.ItemSpec());

    var page = new Page();
    //page.content = GridLayout;
    page.content = StackLayout;
    var x = 1;
    btn1.on(button.Button.tapEvent, function () {
        x++;
        var gravity;
        //btn1.android.setLayoutParams(new android.view.ViewGroup.LayoutParams(android.view.ViewGroup.LayoutParams.FILL_PARENT, android.view.ViewGroup.LayoutParams.FILL_PARENT));
        if (x === 1) {
            gravity = android.view.Gravity.CENTER;
        }
        else if (x === 2) {
            gravity = android.view.Gravity.RIGHT | android.view.Gravity.BOTTOM;
        }
        else {
github NativeScript / NativeScript / tests / app / pages / page12.ts View on Github external
var page = new pages.Page();
    var gridLayout = new gridLayoutModule.GridLayout();

    var lengths = [
        new gridLayoutModule.ItemSpec(140, "pixel"),
        new gridLayoutModule.ItemSpec(1, "star"),
        new gridLayoutModule.ItemSpec(140, "pixel")
    ];

    var rows = 2;
    var cols = 3;
    var row;
    var col;

    for (row = 0; row < rows; row++) {
        var rowDef = new gridLayoutModule.ItemSpec(1, "auto");
        gridLayout.addRow(rowDef);
    }

    for (col = 0; col < cols; col++) {
        gridLayout.addColumn(lengths[col]);
    }

    var btn = new btns.Button();
    btn.text = "Col: 0";
    gridLayoutModule.GridLayout.setColumn(btn, 0);
    gridLayoutModule.GridLayout.setRow(btn, 0);
    gridLayout.addChild(btn);

    var btn2 = new btns.Button();
    btn2.text = "Col: 2";
    gridLayoutModule.GridLayout.setColumn(btn2, 2);
github NativeScript / NativeScript / tests / app / pages / page11.ts View on Github external
b1.text = "nested Btn1";
    sp1.addChild(b1);

    var b2 = new button.Button();
    b2.text = "nested Btn2";
    sp1.addChild(b2);

    grid.addChild(sp1);

    gridModule.GridLayout.setColumn(btn4, 1);
    gridModule.GridLayout.setColumn(btn3, 1);
    gridModule.GridLayout.setRow(btn2, 1);
    gridModule.GridLayout.setRow(btn4, 1);

    grid.addRow(new gridModule.ItemSpec());
    grid.addRow(new gridModule.ItemSpec());
    grid.addColumn(new gridModule.ItemSpec());
    grid.addColumn(new gridModule.ItemSpec());

    var page = new Page();
    //page.content = GridLayout;
    page.content = StackLayout;
    var x = 1;
    btn1.on(button.Button.tapEvent, function () {
        x++;
        var gravity;
        //btn1.android.setLayoutParams(new android.view.ViewGroup.LayoutParams(android.view.ViewGroup.LayoutParams.FILL_PARENT, android.view.ViewGroup.LayoutParams.FILL_PARENT));
        if (x === 1) {
            gravity = android.view.Gravity.CENTER;
        }
        else if (x === 2) {
            gravity = android.view.Gravity.RIGHT | android.view.Gravity.BOTTOM;
github NativeScript / NativeScript / tests / app / pages / page12.ts View on Github external
export function createPage() {
    var page = new pages.Page();
    var gridLayout = new gridLayoutModule.GridLayout();

    var lengths = [
        new gridLayoutModule.ItemSpec(140, "pixel"),
        new gridLayoutModule.ItemSpec(1, "star"),
        new gridLayoutModule.ItemSpec(140, "pixel")
    ];

    var rows = 2;
    var cols = 3;
    var row;
    var col;

    for (row = 0; row < rows; row++) {
        var rowDef = new gridLayoutModule.ItemSpec(1, "auto");
        gridLayout.addRow(rowDef);
    }

    for (col = 0; col < cols; col++) {
        gridLayout.addColumn(lengths[col]);
    }