StackLayout

StackLayout Overview

The StackLayout component enables you to easily align multiple elements in a stack, either vertically or horizontally. It provides various customization options, allowing you to set up different orientations, alignments, and spacing between elements. You can stack and adjust the alignment of inner elements, and even nest multiple StackLayout components within each other. This flexibility makes it simple to create organized layouts that enhance the user interface and improve the overall design of your application.

Live Demo

Appearance

The StackLayout provides built-in arranging options that grant visually appealing and flexible rendering experience. 

Apart from the default vision of the Telerik and Kendo UI StackLayout, the component supports alternative styling options that enable you to configure the individual aspects of its appearance.

Anatomy

The anatomy of the StackLayout summarizes the elements of the component:

1. Inner element
2. Gap
3. StackLayout container

Orientation

Depending on the orientation of the inner elements, the Telerik and Kendo UI StackLayout can be any of the following types:

• Horizontal
• Vertical

1. Horizontal
2. Vertical

Horizontal Alignment

Depending on the horizontal alignment of the inner elements, the Telerik and Kendo UI StackLayout provides the following arrangement configurations:

• Left
• Center
• Right
• Stretch

1. Left
2. Center
3. Right
4. Stretch

Vertical Alignment

Depending on the vertical alignment of the inner elements, the Telerik and Kendo UI StackLayout provides the following arrangement configurations:

• Top
• Center
• Bottom
• Stretch

1. Top
2. Center
3. Bottom
4. Stretch

Nested StackLayout

The Telerik and Kendo UI StackLayout allows you to create more complex layouts by nesting multiple StackLayout components within each other, enabling both horizontal and vertical alignment of inner elements.

Framework-Specific Documentation

For specific information about the component, refer to its official product documentation:

Kendo UI for Angular StackLayoutFind more information about the Kendo UI for Angular StackLayout in the official product documentation of the component.

Telerik UI for Blazor StackLayoutFind more information about the Telerik UI for Blazor StackLayout in the official product documentation of the component.

KendoReact StackLayoutFind more information about the KendoReact StackLayout in the official product documentation of the component.

Kendo UI for Vue StackLayoutFind more information about the Kendo UI for Vue StackLayout in the official product documentation of the component.

Telerik UI for ASP.NET Core StackLayoutFind more information about the Telerik UI for ASP.NET Core StackLayout component.

Telerik UI for ASP.NET MVC StackLayoutFind more information about the Telerik UI for ASP.NET MVC StackLayout component.