Blazor StackLayout Overview

The StackLayout for Blazor is a component that easily aligns multiple elements in a vertical or horizontal order.

Creating Blazor StackLayout

1. Use the <TelerikStackLayout> tag to add the component to your razor page.

2. Inside the <TelerikStackLayout> tag, add the desired HTML containers (e.g. <div>) or components. Each immediate child element will represent one stack layout item.

3. Set Width and Height.

4. (optional) Set the Orientation parameter 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>

Next Steps

• Configure StackLayout orientation, spacing and alignment

See Also

• Live StackLayout Demos
• StackLayout API Reference