New to Telerik UI for ASP.NET Core? Start a free 30-day trial
StackLayout Overview
The ASP.NET Core StackLayout is a component that easily aligns multiple elements in a vertical or horizontal order.
The StackLayout is supported only when you use Kendo UI themes.
Initializing the StackLayout
Use the Stack HtmlHelper or TagHelper to add the component and set the desired options:
- Set the
WidthandHeightfor the component. - Set the
Orientationto control the layout of the component. - Add the desired content. Each immediate child element will represent one stack layout item.
The following example demonstrates how to initialize a StackLayout component:
Razor
@(Html.Kendo().StackLayout()
.Name("stacklayout")
.Width("100%")
.Height("100%")
.Orientation(StackLayoutOrientation.Horizontal)
.Items(i=>{
i.Add().Content(@<text>
<div style="background-color: aqua;">
Aqua colored stack item
</div>
</text>);
i.Add().Content(@<text>
<div style="background-color: cornflowerblue;">
Cornflowerblue colored stack item
</div>
</text>);
i.Add().Content(@<text>
<div style="background-color: blue;">
Blue colored stack item
</div>
</text>);
})
)Functionality and Features
- Layout—To control the appearance of the component, you can use the built-in layout configuration.
- Width and Height—The
WidthandHeightconfiguration properties allow you to adjust the dimensions of the StackLayout component.