@progress/kendo-vue-layout/gridlayout/interfaces/GridLayoutProps.d.ts

TODO

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { GridLayoutColumnProps } from './GridLayoutColumnProps';
import { GridLayoutItemProps } from './GridLayoutItemProps';
import { GridLayoutRowProps } from './GridLayoutRowProps';
/**
 * Represents the props of the [Kendo UI for Vue GridLayout component]({% slug overview_gridlayout %}).
 */
export interface GridLayoutProps {
    /**
     * Sets additional CSS classes to the GridLayout.
     */
    className?: string;
    /**
     * Sets additional CSS styles to the GridLayout.
     */
    style?: any;
    /**
     * Sets the `id` property of the root GridLayout element.
     */
    id?: string;
    /**
     * Specifies the gaps between the elements ([see example]({% slug layout_gridlayout_gaps %})).
     *
     * * The possible keys are:
     * * `rows`
     * * `columns`
     */
    gap?: GridLayoutGap;
    /**
     * Specifies the horizontal and vertical alignment of the inner GridLayout elements (see demos
     * [here]({% slug layout_gridlayout_alignment %}#toc-horizontal-alignment) and [here]({% slug layout_gridlayout_alignment %}#toc-vertical-alignment)).
     *
     * The possible keys are:
     * * `horizontal`—Defines the possible horizontal alignment of the inner GridLayout elements.
     *   * `start`—Uses the start point of the container.
     *   * `center`—Uses the central point of the container.
     *   * `end`—Uses the end point of the container.
     *   * (Default)`stretch`—Stretches the items to fill the width of the container.
     * * `vertical`— Defines the possible vertical alignment of the inner GridLayout elements.
     *   * `top`—Uses the top point of the container.
     *   * `middle`—Uses the middle point of the container.
     *   * `bottom`—Uses the bottom point of the container.
     *   * (Default)`stretch`—Stretches the items to fill the height of the container.
     */
    align?: GridLayoutAlign | any;
    /**
     * Specifies the default number of columns and their widths ([see example]({% slug layout_gridlayout_rowscolumns %})).
     */
    cols?: GridLayoutColumnProps[];
    /**
     * Specifies the default number of rows and their height ([see example]({% slug layout_gridlayout_rowscolumns %})).
     */
    rows?: GridLayoutRowProps[];
    /**
     * The collection of GridLayoutItemProps.
     */
    items?: GridLayoutItemProps[];
}
/**
 * Specifies the gaps between the elements.
 */
export interface GridLayoutGap {
    /**
     * Represents the row gap between the elements
     */
    rows?: number | string;
    /**
     * Represents the column gap between the elements
     */
    cols?: number | string;
}
/**
 * Specifies the horizontal and vertical alignment of the inner GridLayout elements.
 */
export interface GridLayoutAlign {
    /**
     * Defines the possible horizontal alignment of the inner GridLayout elements.
     *
     * The available values are:
     * - `start`—Uses the start point of the container.
     * - `center`—Uses the center point of the container.
     * - `end`—Uses the end point of the container.
     * - (Default)`stretch`—Stretches the items to fill the width of the container.
     */
    horizontal?: 'start' | 'center' | 'end' | 'stretch';
    /**
     * Defines the possible vertical alignment of the inner GridLayout elements.
     *
     * The available values are:
     * - `top`—Uses the top point of the container.
     * - `middle`—Uses the middle point of the container.
     * - `bottom`—Uses the bottom point of the container.
     * - (Default)`stretch`—Stretches the items to fill the height of the container.
     */
    vertical?: 'top' | 'middle' | 'bottom' | 'stretch';
}