@progress/kendo-react-layout
Version:
React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package
88 lines (87 loc) • 3.02 kB
TypeScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2026 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import * as React from 'react';
/**
* Represents the props of the [KendoReact GridLayoutItem component](https://www.telerik.com/kendo-react-ui/components/layout/gridlayout).
*/
export interface GridLayoutItemProps {
/**
* The React elements that will be rendered inside the GridLayoutItem ([see example](https://www.telerik.com/kendo-react-ui/components/layout/gridlayout/items#toc-items)).
*
* Example:
* ```jsx
* <GridLayoutItem>Content</GridLayoutItem>
* ```
*/
children?: React.ReactNode;
/**
* Sets additional CSS classes to the GridLayoutItem ([see example](https://www.telerik.com/kendo-react-ui/components/layout/gridlayout/items#toc-items)).
*
* Example:
* ```jsx
* <GridLayoutItem className="custom-class" />
* ```
*/
className?: string;
/**
* Sets additional CSS styles to the GridLayoutItem ([see example](https://www.telerik.com/kendo-react-ui/components/layout/gridlayout/items#toc-items)).
*
* Example:
* ```jsx
* <GridLayoutItem style={{ backgroundColor: 'red' }} />
* ```
*/
style?: React.CSSProperties;
/**
* Sets the `id` property of the root GridLayoutItem element ([see example](https://www.telerik.com/kendo-react-ui/components/layout/gridlayout/items#toc-items)).
*
* Example:
* ```jsx
* <GridLayoutItem id="item-1" />
* ```
*/
id?: string;
/**
* Defines the column line from which the element will start ([see example](https://www.telerik.com/kendo-react-ui/components/layout/gridlayout/items#toc-items)).
*
* Example:
* ```jsx
* <GridLayoutItem col={1} />
* ```
*/
col?: number;
/**
* Specifies the number of columns over which the element will span ([see example](https://www.telerik.com/kendo-react-ui/components/layout/gridlayout/items#toc-items)).
* Defaults to `1`.
*
* Example:
* ```jsx
* <GridLayoutItem colSpan={2} />
* ```
*/
colSpan?: number;
/**
* Defines the row line from which the element will start ([see example](https://www.telerik.com/kendo-react-ui/components/layout/gridlayout/items#toc-items)).
*
* Example:
* ```jsx
* <GridLayoutItem row={1} />
* ```
*/
row?: number;
/**
* Specifies the number of rows over which the element will span ([see example](https://www.telerik.com/kendo-react-ui/components/layout/gridlayout/items#toc-items)).
* Defaults to `1`.
*
* Example:
* ```jsx
* <GridLayoutItem rowSpan={2} />
* ```
*/
rowSpan?: number;
}