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.
IComponent
IHandleEvent
IHandleAfterRender
RadzenFlexComponent.JustifyContent
RadzenFlexComponent.AlignItems
RadzenComponentWithChildren.ChildContent
RadzenComponent.SetParametersAsync
RadzenComponent.OnAfterRenderAsync
RadzenComponent.RaiseContextMenu
RadzenComponent.RaiseMouseEnter
RadzenComponent.AddContextMenu
RadzenComponent.RaiseMouseLeave
RadzenComponent.OnBecameInvisible
RadzenComponent.DefaultCulture
RadzenComponent.IsJSRuntimeAvailable
ComponentBase.OnInitializedAsync
ComponentBase.OnParametersSet
ComponentBase.OnParametersSetAsync
ComponentBase.StateHasChanged
ComponentBase.ShouldRender
ComponentBase.OnAfterRender
ComponentBase.InvokeAsync
ComponentBase.DispatchExceptionAsync
ComponentBase.RendererInfo
ComponentBase.Assets
ComponentBase.AssignedRenderMode
Namespace: Radzen.Blazor
Assembly: Radzen.Blazor.dll
public class RadzenStack : RadzenFlexComponent, IComponent, IHandleEvent, IHandleAfterRenderVertical 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>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.
public RadzenStack()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.
public string Gap { get; set; }| Type | Description |
|---|---|
| string | 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. |
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.
public Orientation Orientation { get; set; }| Type | Description |
|---|---|
| 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. |
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.
public bool Reverse { get; set; }| Type | Description |
|---|---|
| bool | 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. |
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.
public FlexWrap Wrap { get; set; }| Type | Description |
|---|---|
| FlexWrap | 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. |
protected override void BuildRenderTree(Rendering.RenderTreeBuilder __builder)| Type | Name | Description |
|---|---|---|
| Rendering.RenderTreeBuilder | __builder |
protected override string GetComponentCssClass()| Type | Description |
|---|---|
| string |
Gets the component CSS style.
protected string GetComponentStyle()| Type | Description |
|---|---|
| string |
Gets the final CSS style rendered by the component. Combines it with a style custom attribute.
protected string GetStyle()| Type | Description |
|---|---|
| string |