@progress/kendo-react-layout
Version:
React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package
98 lines (97 loc) • 4.35 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 StackLayout component](https://www.telerik.com/kendo-react-ui/components/layout/stacklayout).
*/
export interface StackLayoutProps {
/**
* The React elements that will be rendered inside the StackLayout.
*/
children?: React.ReactNode;
/**
* Sets additional CSS classes to the StackLayout.
*/
className?: string;
/**
* Sets additional CSS styles to the StackLayout.
*/
style?: React.CSSProperties;
/**
* Sets the `id` property of the root StackLayout element.
*/
id?: string;
/**
* Specifies the gap between the inner elements ([see example](https://www.telerik.com/kendo-react-ui/components/layout/stacklayout/layout#toc-gaps)).
*/
gap?: number | string;
/**
* Specifies the StackLayout orientation.
* ([see example](https://www.telerik.com/kendo-react-ui/components/layout/stacklayout/layout#toc-orientation)).
*
* The possible values are:
* * (Default)`horizontal`
* * `vertical`
*
* @default horizontal
*/
orientation?: StackLayoutOrientation;
/**
* Specifies the horizontal and vertical alignment of the inner StackLayout elements.
* Demo ([here](https://www.telerik.com/kendo-react-ui/components/layout/stacklayout/layout#toc-horizontal-alignment)) and ([here](https://www.telerik.com/kendo-react-ui/components/layout/stacklayout/layout#toc-vertical-alignment)).
*
* The possible keys are:
* * `horizontal`—Defines the possible horizontal alignment of the inner StackLayout 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 StackLayout 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?: StackLayoutAlign;
}
/**
* Specifies the StackLayout orientation ([see example](https://www.telerik.com/kendo-react-ui/components/layout/stacklayout/layout#toc-orientation)).
*
* The possible values are:
* * (Default)`horizontal`
* * `vertical`
*
*/
export type StackLayoutOrientation = 'horizontal' | 'vertical';
/**
* Specifies the horizontal and vertical alignment of the inner StackLayout elements.
*/
export interface StackLayoutAlign {
/**
* Defines the possible horizontal alignment of the inner StackLayout elements
* ([see example](https://www.telerik.com/kendo-react-ui/components/layout/stacklayout/layout#toc-horizontal-alignment)).
*
* 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 StackLayout elements
* ([see example](https://www.telerik.com/kendo-react-ui/components/layout/stacklayout/layout#toc-vertical-alignment)).
*
* 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';
}