Blazor StackLayout Overview
The StackLayout for Blazor is a component that easily aligns multiple elements in a vertical or horizontal order.
The Stack Layout component is part of Telerik UI for Blazor, a
professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Creating Blazor StackLayout
Use the
<TelerikStackLayout>tag to add the component to your razor page.Inside the
<TelerikStackLayout>tag, add the desired HTML containers (e.g.<div>) or components. Each immediate child element will represent one stack layout item.Set
WidthandHeight.(optional) Set the
Orientationparameter to determine the layouts direction.
StackLayout basic configuration.
@* This example showcases how the StackLayout fills the entire parent container and some of its core features. *@
<style>
.parent-container {
height: 500px;
width: 500px;
border: 1px solid black;
}
</style>
<div class="parent-container">
<TelerikStackLayout Orientation="@StackLayoutOrientation.Horizontal"
Width="100%"
Height="100%">
<div style="background-color: aqua;">
Aqua colored stack item
</div>
<div style="background-color: cornflowerblue;">
Cornflowerblue colored stack item
</div>
<div style="background-color: blue;">
Blue colored stack item
</div>
</TelerikStackLayout>
</div>
Layout
The layout is the building block of the StackLayout component. Control its appearance via different parameters. Read more about the Blazor StackLayout layout.
StackLayout Parameters
The Blazor StackLayout provides various parameters that allow you to configure the component:
| Parameter | Type and Default Value | Description |
|---|---|---|
Class |
string |
The CSS class to be rendered on the main wrapping element of the StackLayout component, which is <div class="k-stack-layout">. Use for styling customizations. |
Height |
string |
The StackLayout height as a CSS unit. See the Dimensions article for more details on what units you can use and how percentage dimensions work. |
Width |
string |
The StackLayout width as a CSS unit. See the Dimensions article for more details on what units you can use and how percentage dimensions work. |
Orientation |
StackLayoutOrientation enum ( StackLayoutOrientation.Horizontal) |
Whether the content will be aligned horizontally or vertically. See the Layout Orientation article for more information. |
Spacing |
string |
The space between the elements in the StackLayout. See the Layout Spacing article for more information. |
HorizontalAlign |
StackLayoutHorizontalAlign enum ( StackLayoutHorizontalAlign.Stretch) |
The StackLayout items alignment based on the X axis. See the Layout HorizontalAlign article for more information. |
VerticalAlign |
StackLayoutVerticalAlign enum ( StackLayoutVerticalAlign.Stretch) |
The StackLayout items alignment based on the Y axis. See the Layout VerticalAlign article for more information. |
Nested StackLayouts
Sometimes you may need to create a more complex layout that includes both horizontal and vertical items. To do that, nest TelerikStackLayout components inside one another.
Use nested StackLayout to create a page layout.
<TelerikStackLayout Orientation="StackLayoutOrientation.Vertical" Height="100%">
<div class="red">
Header
</div>
<TelerikStackLayout Orientation="StackLayoutOrientation.Horizontal">
<div class="green">
Navigation
</div>
<div class="yellow">
Content
</div>
<div class="orange">
Right side content
</div>
</TelerikStackLayout>
<div class="purple">
Footer
</div>
</TelerikStackLayout>
<style>
.red {
background-color: #dc3545;
}
.green {
background-color: #198754;
}
.yellow {
background-color: #ffc107;
}
.orange {
background-color: #fd7e14;
}
.purple {
background-color: #6f42c1;
}
body, html {
height: 100%;
}
app {
display: initial !important;
}
</style>