StackLayout Overview
The ASP.NET MVC StackLayout is a component that easily aligns multiple elements in a vertical or horizontal order.
The StackLayout is part of Telerik UI for ASP.NET MVC, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
The StackLayout is supported only when you use Kendo UI Sass themes.
Initializing the StackLayout
Use the Stack HtmlHelper to add the component and set the desired options:
- Set the
Width
andHeight
for the component. - Set the
Orientation
to 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:
@(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
Width
andHeight
configuration properties allow you to adjust the dimensions of the StackLayout component.