Blazor StackLayout Overview

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

Telerik UI for Blazor Ninja image

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

  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

See Also

In this article