New to KendoReact? Start a free 30-day trial

StackLayout

Component

Represents the KendoReact StackLayout component. Arranges its inner elements horizontally, or vertically in a stack. Nesting stack layouts is supported to build more complex layouts.

Definition

Package:@progress/kendo-react-layout

Properties Interface:StackLayoutProps

Syntax:

jsx


const App = () => {
  return (
    <StackLayout
      orientation="vertical"
      align={{horizontal: 'stretch', vertical: 'stretch'}}
      gap={10}
    >
      <div>Box</div>
      <div>Box</div>
      <div>Box</div>
      <div>Box</div>
    </StackLayout>
  );
};

Properties

align?

StackLayoutAlign

Specifies the horizontal and vertical alignment of the inner StackLayout elements. Demo (here) and (here).

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.