Accent color
# Stack
**Also known as:** WrapPanel
## Description
A Stack is a container-type component that abstracts the implementation of a flexbox in order to define the layout of its children components.
## 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. |
| AriaLabel | `string?` | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | `string?` | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | `BitDir?` | null | Gets or sets the text directionality for the component's content. |
| ForceAnimation | `bool` | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| HtmlAttributes | `Dictionary<string, object>` | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. |
| Id | `string?` | null | Gets or sets the unique identifier for the component's root element. |
| IsEnabled | `bool` | true | Gets or sets a value indicating whether the component is enabled and can respond to user interaction. |
| Style | `string?` | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | `string?` | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | `BitVisibility` | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
## Public Members
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| UniqueId | `Guid` | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | `ElementReference` | | Gets the reference to the root HTML element associated with this component. |
## Enums
### 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. |
## Examples
\n**Basic**:
```razor
```
\n**Gap**:
```razor
```
```csharp
private double gap = 1;
```
\n**Nesting**:
```razor
```
\n**Alignment**:
```razor
```
```csharp
private bool isReversed;
private bool isHorizontal;
private BitDir direction;
private BitAlignment verticalAlign;
private BitAlignment horizontalAlign;
```
\n**Wrap**:
```razor
@for (int i = 0; i < 20; i++)
{
var index = i;
```
```csharp
private double stackHeight = 15;
```
\n**Grow**:
```razor
Grow is 3
Grow is 2
Grow is 1
Normal
Grows
Normal
Normal
Grows
Normal
```
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2-1
Item 2-2
Item 2-3
Item 3-1
Item 3-2
Item 3-3
Item 1
Item 2
Item 3
Item @index
}