@progress/kendo-angular-layout
Version:
Kendo UI for Angular Layout Package - a collection of components to create professional application layoyts
75 lines (74 loc) • 3.54 kB
TypeScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Renderer2, ElementRef, AfterViewInit, SimpleChanges, OnChanges } from '@angular/core';
import { GridLayoutGapSettings, AlignSettings } from './models';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import * as i0 from "@angular/core";
/**
* Represents the Kendo UI GridLayout component for Angular.
* Arranges child components in a two-dimensional grid layout with customizable rows, columns, and gaps ([see overview]({% slug overview_gridlayout %})).
*
* @example
* ```html
* <kendo-gridlayout [rows]="[100, 200]" [cols]="['1fr', '2fr']" [gap]="10">
* <kendo-gridlayout-item [row]="1" [col]="1">
* <p>Item 1</p>
* </kendo-gridlayout-item>
* <kendo-gridlayout-item [row]="1" [col]="2">
* <p>Item 2</p>
* </kendo-gridlayout-item>
* </kendo-gridlayout>
* ```
*
* @remarks
* Supported children components are: {@link GridLayoutItemComponent}.
*/
export declare class GridLayoutComponent implements AfterViewInit, OnChanges {
private renderer;
private element;
private localization;
hostClass: boolean;
get dir(): string;
/**
* Specifies the number of rows and their height
* ([More details](slug:layout_gridlayout#toc-rows-and-columns)).
*
* You can define rows by passing an array where the number of elements determines the number of rows or each element defines the size of the corresponding row.
* For example, you can use CSS units like `px`, `%`, `fr`, or `auto` to define the row sizes.
*/
rows: Array<any>;
/**
* Specifies the number of columns and their widths
* ([More details](slug:layout_gridlayout#toc-rows-and-columns)).
*
* You can define columns by passing an array where the number of elements determines the number of columns or each element defines the size of the corresponding column.
* For example, you can use CSS units like `px`, `%`, `fr`, or `auto` to define the column sizes.
*/
cols: Array<any>;
/**
* Specifies the gaps between the elements ([see example](slug:layout_gridlayout#toc-gap)).
*
* @default 0
*/
gap: number | string | GridLayoutGapSettings;
/**
* Specifies the horizontal and vertical alignment of the inner GridLayout elements
* ([see example]({% slug layout_gridlayout %}#toc-alignment)).
*/
set align(align: AlignSettings);
get align(): AlignSettings;
private _align;
private justifyClass;
private alignClass;
constructor(renderer: Renderer2, element: ElementRef, localization: LocalizationService);
ngAfterViewInit(): void;
ngOnChanges(changes: SimpleChanges): void;
private handleAlignClasses;
private setGap;
private handleGridTemplateStyling;
private get direction();
static ɵfac: i0.ɵɵFactoryDeclaration<GridLayoutComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<GridLayoutComponent, "kendo-gridlayout", ["kendoGridLayout"], { "rows": { "alias": "rows"; "required": false; }; "cols": { "alias": "cols"; "required": false; }; "gap": { "alias": "gap"; "required": false; }; "align": { "alias": "align"; "required": false; }; }, {}, never, ["*"], true, never>;
}