StackLayout Overview

The Blazor StackLayout component allows you to easily align 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 85+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

In This Article:

Basics

To use a Telerik StackLayout for Blazor

  1. Declare the <TelerikStackLayout> tag

  2. Inside the <TelerikStackLayout> tag, add the desired elements.

StackLayout with its most common features

@* 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>

The result from the code snippet above

overview of the StackLayout functionality

Component namespace and reference

<TelerikStackLayout Orientation="@StackLayoutOrientation.Horizontal"
                    Width="100%"
                    Height="100%"
                    @ref="StackLayoutRef">
    <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>

@code {
    Telerik.Blazor.Components.TelerikStackLayout StackLayoutRef { get; set; }
}

Features

The StackLayout offers the following features:

  • Class - the CSS class that renders on the main wrapping element of the component.

  • Height - takes a CSS unit that determines how tall the StackLayout is. See the Dimensions article for more details on what units you can use and how dimensions in percent work.

  • Width- takes a CSS unit that determines how wide the StackLayout is. See the Dimensions article for more details on what units you can use and how dimensions in percent work.

  • Orientation - whether the content will be aligned horizontally or vertically. Takes a member of the StackLayoutOrientation enum and defaults to Horizontal. See the Layout article for more information.

  • Spacing - the space between the elements in the StackLayout. See the Layout article for more information.

  • HorizontalAlign - controls the alignment of the items in the StackLayout based on the X axis. Takes a member of the StackLayoutHorizontalAlign enum. See the Layout article for more information.

  • VerticalAlign - controls the alignment of the items in the StackLayout based on the Y axis. Takes a member of the StackLayoutVerticalAlign enum. See the Layout article for more information.

Nested StackLayouts

Sometimes you need to create a more complex layout that includes both horizontal and vertical items. To do that, you can 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>

The result from the code snippet above

Nested StackLayouts can create complex layout

See Also

In this article
Not finding the help you need? Improve this article