Home Docs

Stack
WrapPanel

A Stack is a container-type component that abstracts the implementation of a flexbox in order to define the layout of its children components.

Usage

Basic
Default (Vertical)
Item 1
Item 2
Item 3


Horizontal
Item 1
Item 2
Item 3


Reversed vertical
Item 1
Item 2
Item 3


Reversed horizontal
Item 1
Item 2
Item 3
<BitStack Style="background:#71afe5">
    <div style="color:black">Item 1</div>
    <div style="color:black">Item 2</div>
    <div style="color:black">Item 3</div>
</BitStack>

<BitStack Horizontal Style="background:#71afe5">
    <div style="color:black">Item 1</div>
    <div style="color:black">Item 2</div>
    <div style="color:black">Item 3</div>
</BitStack>

<BitStack Reversed Style="background:#71afe5">
    <div style="color:black">Item 1</div>
    <div style="color:black">Item 2</div>
    <div style="color:black">Item 3</div>
</BitStack>

<BitStack Horizontal Reversed Style="background:#71afe5">
    <div style="color:black">Item 1</div>
    <div style="color:black">Item 2</div>
    <div style="color:black">Item 3</div>
</BitStack>
Gap

Item 1
Item 2
Item 3
<style>
    .item {
        color: white;
        padding: 0.5rem;
        background-color: #0078d4;
    }
</style>

<BitSlider Label="Gap between items" Max="5" ValueFormat="0.0 rem" Step="0.1" @bind-Value="@gap" />

<BitStack Gap="@($"{gap}rem")" Style="background:#71afe5">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</BitStack>
@code {
    private double gap = 1;
}
Nesting
Item 1
Item 2-1
Item 2-2
Item 2-3
Item 3-1
Item 3-2
Item 3-3
<style>
    .item {
        color: white;
        padding: 0.5rem;
        background-color: #0078d4;
    }
</style>

<BitStack Horizontal HorizontalAlign="BitAlignment.SpaceAround" Style="background:#71afe5">
    <div class="item">Item 1</div>
    <BitStack>
        <div class="item">Item 2-1</div>
        <div class="item">Item 2-2</div>
        <div class="item">Item 2-3</div>
    </BitStack>
    <BitStack Horizontal>
        <div class="item">Item 3-1</div>
        <div class="item">Item 3-2</div>
        <div class="item">Item 3-3</div>
    </BitStack>
</BitStack>
Alignment




Item 1
Item 2
Item 3
<style>
    .item {
        color: white;
        padding: 0.5rem;
        background-color: #0078d4;
    }
</style>

<BitStack Horizontal Wrap Gap="2rem">
    <BitToggle @bind-Value="isHorizontal" Text="Horizontal" />
    <BitToggle @bind-Value="isReversed" Text="Reversed" />
</BitStack>

<BitChoiceGroup @bind-Value="direction"
                Horizontal
                Label="Direction"
                TItem="BitChoiceGroupOption<BitDir>" TValue="BitDir">
    <BitChoiceGroupOption Text="LTR" Value="BitDir.Ltr" />
    <BitChoiceGroupOption Text="RTL" Value="BitDir.Rtl" />
    <BitChoiceGroupOption Text="Auto" Value="BitDir.Auto" />
</BitChoiceGroup>

<BitChoiceGroup @bind-Value="horizontalAlign"
                Horizontal
                Label="Horizontal Align"
                TItem="BitChoiceGroupOption<BitAlignment>" TValue="BitAlignment">
    <BitChoiceGroupOption Text="Start" Value="BitAlignment.Start" />
    <BitChoiceGroupOption Text="Center" Value="BitAlignment.Center" />
    <BitChoiceGroupOption Text="End" Value="BitAlignment.End" />
    <BitChoiceGroupOption Text="SpaceBetween" Value="BitAlignment.SpaceBetween" />
    <BitChoiceGroupOption Text="SpaceAround" Value="BitAlignment.SpaceAround" />
    <BitChoiceGroupOption Text="SpaceEvenly" Value="BitAlignment.SpaceEvenly" />
    <BitChoiceGroupOption Text="Baseline" Value="BitAlignment.Baseline" />
    <BitChoiceGroupOption Text="Stretch" Value="BitAlignment.Stretch" />
</BitChoiceGroup>

<BitChoiceGroup @bind-Value="verticalAlign"
                Horizontal
                Label="Vertical Align"
                TItem="BitChoiceGroupOption<BitAlignment>" TValue="BitAlignment">
    <BitChoiceGroupOption Text="Start" Value="BitAlignment.Start" />
    <BitChoiceGroupOption Text="Center" Value="BitAlignment.Center" />
    <BitChoiceGroupOption Text="End" Value="BitAlignment.End" />
    <BitChoiceGroupOption Text="SpaceBetween" Value="BitAlignment.SpaceBetween" />
    <BitChoiceGroupOption Text="SpaceAround" Value="BitAlignment.SpaceAround" />
    <BitChoiceGroupOption Text="SpaceEvenly" Value="BitAlignment.SpaceEvenly" />
    <BitChoiceGroupOption Text="Baseline" Value="BitAlignment.Baseline" />
    <BitChoiceGroupOption Text="Stretch" Value="BitAlignment.Stretch" />
</BitChoiceGroup>

<BitStack Dir="direction"
            Reversed="isReversed"
            Horizontal="isHorizontal"
            VerticalAlign="verticalAlign"
            HorizontalAlign="horizontalAlign"
            Style="background:#71afe5;height:15rem">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</BitStack>
@code {
    private bool isReversed;
    private bool isHorizontal;
    private BitDir direction;
    private BitAlignment verticalAlign;
    private BitAlignment horizontalAlign;
}
Wrap

Item 0
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
<style>
    .item {
        display: flex;
        width: 3.5rem;
        height: 3.5rem;
        align-items: center;
        justify-content: center;
        background-color: dodgerblue;
    }
</style>

<BitSlider Label="Stack height" Min="10" Max="20" Step="0.1" ValueFormat="0.0 rem" @bind-Value="@stackHeight" />

<BitStack Wrap Style="@($"height:{stackHeight}rem;background:#71afe5")">
    @for (int i = 0; i < 20; i++)
    {
        var index = i;
        <div class="item">Item @index</div>
    }
</BitStack>
@code {
    private double stackHeight = 15;
}
Grow
The "Grows" parameter sets flex-grow to 1, while "Grow" accepts customizable values for more flexibility.


Grow is 3
Grow is 2
Grow is 1


Normal
Grows
Normal


Normal
Grows
Normal 
<BitStack Gap="0.5rem" Style="background:#71afe5;height:15rem">
    <BitStack Grow="3"
              Class="item" AutoHeight
              VerticalAlign="BitAlignment.Center"
              HorizontalAlign="BitAlignment.Center">
        Grow is 3
    </BitStack>
    <BitStack Grow="2"
              Class="item" AutoHeight
              VerticalAlign="BitAlignment.Center"
              HorizontalAlign="BitAlignment.Center">
        Grow is 2
    </BitStack>
    <BitStack Grow="1"
              Class="item" AutoHeight
              VerticalAlign="BitAlignment.Center"
              HorizontalAlign="BitAlignment.Center">
        Grow is 1
    </BitStack>
</BitStack>


<BitStack Gap="0.5rem" Style="background:#71afe5;height:15rem">
    <BitStack Class="item" AutoHeight
              VerticalAlign="BitAlignment.Center"
              HorizontalAlign="BitAlignment.Center">
        Normal
    </BitStack>
    <BitStack Grows
              Class="item" AutoHeight
              VerticalAlign="BitAlignment.Center"
              HorizontalAlign="BitAlignment.Center">
        Grows
    </BitStack>
    <BitStack Class="item" AutoHeight
              VerticalAlign="BitAlignment.Center"
              HorizontalAlign="BitAlignment.Center">
        Normal
    </BitStack>
</BitStack>


<BitStack Horizontal
          Gap="0.5rem"
          Style="background:#71afe5;height:15rem">
    <BitStack Class="item" AutoWidth
              VerticalAlign="BitAlignment.Center"
              HorizontalAlign="BitAlignment.Center">
        Normal
    </BitStack>
    <BitStack Grows
              Class="item" AutoWidth
              VerticalAlign="BitAlignment.Center"
              HorizontalAlign="BitAlignment.Center">
        Grows
    </BitStack>
    <BitStack Class="item" AutoWidth
              VerticalAlign="BitAlignment.Center"
              HorizontalAlign="BitAlignment.Center">
        Normal
    </BitStack>
</BitStack>

API

BitStack parameters
Name
Type
Default value
Description
Alignment BitAlignment? null Defines whether to render Stack children both horizontally and vertically.
AutoHeight bool false Make the height of the stack auto.
AutoSize bool false Make the width and height of the stack auto.
AutoWidth bool false Make the width of the stack auto.
ChildContent RenderFragment? null The content of the stack.
Element string? null The custom html element used for the root node. The default is "div".
FillContent bool false Expand the direct children to occupy all of the root element's width and height.
FitHeight bool false Sets the height of the stack to fit its content.
FitSize bool false Sets the width and height of the stack to fit its content.
FitWidth bool false Sets the width of the stack to fit its content.
Gap string? null Defines the spacing between Stack children. The property is specified as a value for 'row gap', followed optionally by a value for 'column gap'. If 'column gap' is omitted, it's set to the same value as 'row gap'.
Grow string? null Defines how much to grow the Stack in proportion to its siblings.
Grows bool false Makes grow the Stack in proportion to its siblings.
Horizontal bool false Defines whether to render Stack children horizontally.
HorizontalAlign BitAlignment? null Defines whether to render Stack children horizontally.
Reversed bool false Defines whether to render Stack children in the opposite direction (bottom-to-top if it's a vertical Stack and right-to-left if it's a horizontal Stack).
VerticalAlign BitAlignment? null Defines whether to render Stack children vertically.
Wrap bool false Defines whether Stack children should wrap onto multiple rows or columns when they are about to overflow the size of the Stack.
BitComponentBase parameters
Name
Type
Default value
Description
AriaLabel string? null The aria-label of the control for the benefit of screen readers.
Class string? null Custom CSS class for the root element of the component.
Dir BitDir? null Determines the component direction.
HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Capture and render additional attributes in addition to the component's parameters.
Id string? null Custom id attribute for the root element. if null the UniqueId will be used instead.
IsEnabled bool true Whether or not the component is enabled.
Style string? null Custom CSS style for the root element of the component.
Visibility BitVisibility BitVisibility.Visible Whether the component is visible, hidden or collapsed.
BitComponentBase public members
Name
Type
Default value
Description
UniqueId Guid Guid.NewGuid() The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction.
RootElement ElementReference The ElementReference of the root element.
BitAlignment enum
Name
Value
Description
Start 0
End 1
Center 2
SpaceBetween 3
SpaceAround 4
SpaceEvenly 5
Baseline 6
Stretch 7
BitVisibility enum
Name
Value
Description
Visible 0 The content of the component is visible.
Hidden 1 The content of the component is hidden, but the space it takes on the page remains (visibility:hidden).
Collapsed 2 The component is hidden (display:none).
BitDir enum
Name
Value
Description
Ltr 0 Ltr (left to right) is to be used for languages that are written from the left to the right (like English).
Rtl 1 Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic).
Auto 2 Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.

Feedback

You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.

Or you can review / edit this page on GitHub.

Or you can review / edit this component on GitHub.
  • On this page