/** * @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'; }