Class RadzenStack

A flexbox container component that arranges child elements in a vertical or horizontal stack with configurable spacing and alignment. RadzenStack provides a simpler alternative to RadzenRow/RadzenColumn for linear layouts without the 12-column grid constraint. Ideal for creating simple vertical or horizontal layouts without needing a grid system. Unlike RadzenRow/RadzenColumn which uses a 12-column grid, Stack arranges children linearly with equal spacing. Features Vertical (column) or Horizontal (row) orientation, consistent gap spacing between child elements, AlignItems for cross-axis alignment and JustifyContent for main-axis distribution, option to reverse the order of children, and control whether children wrap to new lines or stay in a single line. Use for simpler layouts like button groups, form field stacks, or toolbar arrangements.

Inheritance

object

ComponentBase

RadzenComponent

RadzenComponentWithChildren

RadzenFlexComponent

RadzenStack

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable

Inherited Members

RadzenFlexComponent.JustifyContent

RadzenFlexComponent.AlignItems

RadzenComponentWithChildren.ChildContent

RadzenComponent.OnMouseEnter()

RadzenComponent.OnMouseLeave()

RadzenComponent.OnContextMenu(MouseEventArgs)

RadzenComponent.GetCssClass()

RadzenComponent.GetId()

RadzenComponent.Debounce(Func<Task>, int)

RadzenComponent.OnInitialized()

RadzenComponent.SetParametersAsync(ParameterView)

RadzenComponent.OnAfterRenderAsync(bool)

RadzenComponent.RaiseContextMenu(MouseEventArgs)

RadzenComponent.RaiseMouseEnter()

RadzenComponent.AddContextMenu()

RadzenComponent.RaiseMouseLeave()

RadzenComponent.Dispose()

RadzenComponent.Attributes

RadzenComponent.Element

RadzenComponent.MouseEnter

RadzenComponent.MouseLeave

RadzenComponent.ContextMenu

RadzenComponent.Culture

RadzenComponent.DefaultCulture

RadzenComponent.Style

RadzenComponent.Visible

RadzenComponent.UniqueID

RadzenComponent.JSRuntime

RadzenComponent.IsJSRuntimeAvailable

RadzenComponent.Reference

RadzenComponent.CurrentStyle

ComponentBase.OnInitializedAsync()

ComponentBase.OnParametersSet()

ComponentBase.OnParametersSetAsync()

ComponentBase.StateHasChanged()

ComponentBase.ShouldRender()

ComponentBase.OnAfterRender(bool)

ComponentBase.InvokeAsync(Action)

ComponentBase.InvokeAsync(Func<Task>)

ComponentBase.DispatchExceptionAsync(Exception)

object.GetType()

object.MemberwiseClone()

object.ToString()

object.Equals(object)

object.Equals(object, object)

object.ReferenceEquals(object, object)

object.GetHashCode()

Namespace: Radzen.Blazor

Assembly: Radzen.Blazor.dll

Syntax

public class RadzenStack : RadzenFlexComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposable

Examples

Vertical stack with gap spacing:

<RadzenStack Gap="1rem">
    <RadzenText>First item</RadzenText>
    <RadzenText>Second item</RadzenText>
    <RadzenText>Third item</RadzenText>
</RadzenStack>

Horizontal button group:

<RadzenStack Orientation="Orientation.Horizontal" Gap="0.5rem" JustifyContent="JustifyContent.End">
    <RadzenButton Text="Cancel" />
    <RadzenButton Text="Save" ButtonStyle="ButtonStyle.Primary" />
</RadzenStack>

Centered content with wrapping:

<RadzenStack Orientation="Orientation.Horizontal" Wrap="FlexWrap.Wrap" AlignItems="AlignItems.Center" Gap="2rem">
    @* Child elements *@
</RadzenStack>

Constructors

RadzenStack()

A flexbox container component that arranges child elements in a vertical or horizontal stack with configurable spacing and alignment. RadzenStack provides a simpler alternative to RadzenRow/RadzenColumn for linear layouts without the 12-column grid constraint. Ideal for creating simple vertical or horizontal layouts without needing a grid system. Unlike RadzenRow/RadzenColumn which uses a 12-column grid, Stack arranges children linearly with equal spacing. Features Vertical (column) or Horizontal (row) orientation, consistent gap spacing between child elements, AlignItems for cross-axis alignment and JustifyContent for main-axis distribution, option to reverse the order of children, and control whether children wrap to new lines or stay in a single line. Use for simpler layouts like button groups, form field stacks, or toolbar arrangements.

Declaration

public RadzenStack()

Examples

Vertical stack with gap spacing:

<RadzenStack Gap="1rem">
    <RadzenText>First item</RadzenText>
    <RadzenText>Second item</RadzenText>
    <RadzenText>Third item</RadzenText>
</RadzenStack>

Horizontal button group:

<RadzenStack Orientation="Orientation.Horizontal" Gap="0.5rem" JustifyContent="JustifyContent.End">
    <RadzenButton Text="Cancel" />
    <RadzenButton Text="Save" ButtonStyle="ButtonStyle.Primary" />
</RadzenStack>

Centered content with wrapping:

<RadzenStack Orientation="Orientation.Horizontal" Wrap="FlexWrap.Wrap" AlignItems="AlignItems.Center" Gap="2rem">
    @* Child elements *@
</RadzenStack>

Properties

Gap

Gets or sets the spacing between child elements in the stack. Accepts CSS length values (e.g., "1rem", "16px", "2em") or unitless numbers (interpreted as pixels). The gap applies uniformly between all adjacent children.

Declaration

[Parameter]
public string Gap { get; set; }

Property Value

Type	Description
string	The gap spacing as a CSS length value. Default is null (no gap).

Orientation

Gets or sets the stack direction: Vertical arranges children top-to-bottom, Horizontal arranges left-to-right. This determines the main axis direction for the flexbox layout.

Declaration

[Parameter]
public Orientation Orientation { get; set; }

Property Value

Type	Description
Orientation	The stack orientation. Default is Vertical.

Reverse

Gets or sets whether to reverse the display order of child elements. When true, children are displayed in reverse order (bottom-to-top for vertical, right-to-left for horizontal). Useful for visual reordering without changing markup order.

Declaration

[Parameter]
public bool Reverse { get; set; }

Property Value

Type	Description
bool	true to reverse child order; otherwise, false. Default is false.

Wrap

Gets or sets the flex wrap behavior controlling whether child elements wrap to new lines when they don't fit. NoWrap keeps all children on one line (may cause overflow), Wrap allows wrapping to multiple lines.

Declaration

[Parameter]
public FlexWrap Wrap { get; set; }

Property Value

Type	Description
FlexWrap	The flex wrap mode. Default is NoWrap.

Methods

BuildRenderTree(RenderTreeBuilder)

A flexbox container component that arranges child elements in a vertical or horizontal stack with configurable spacing and alignment. RadzenStack provides a simpler alternative to RadzenRow/RadzenColumn for linear layouts without the 12-column grid constraint. Ideal for creating simple vertical or horizontal layouts without needing a grid system. Unlike RadzenRow/RadzenColumn which uses a 12-column grid, Stack arranges children linearly with equal spacing. Features Vertical (column) or Horizontal (row) orientation, consistent gap spacing between child elements, AlignItems for cross-axis alignment and JustifyContent for main-axis distribution, option to reverse the order of children, and control whether children wrap to new lines or stay in a single line. Use for simpler layouts like button groups, form field stacks, or toolbar arrangements.

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
RenderTreeBuilder	__builder

Overrides

ComponentBase.BuildRenderTree(RenderTreeBuilder)

GetComponentCssClass()

Gets the component CSS class.

Declaration

protected override string GetComponentCssClass()

Returns

Type	Description
string

Overrides

RadzenComponent.GetComponentCssClass()

GetComponentStyle()

Gets the component CSS style.

Declaration

protected string GetComponentStyle()

Returns

Type	Description
string

GetStyle()

Gets the final CSS style rendered by the component. Combines it with a style custom attribute.

Declaration

protected string GetStyle()

Returns

Type	Description
string

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable