Stack - Fod.DemoPage

Quick Start

Basic vertical stack with gap spacing between items.

Item 1

Item 2

Item 3

razor

<FodStack Direction="StackDirection.Column" Gap="Spacing.Spacing16">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</FodStack>

Direction

Stack items vertically (column) or horizontally (row).

Column (Default)

A

B

C

Row

A

B

C

razor

<FodStack Direction="StackDirection.Column">Column</FodStack>
<FodStack Direction="StackDirection.Row">Row</FodStack>

Gap Variations

Control spacing between items using spacing tokens.

None

1

2

3

4px

1

2

3

8px

1

2

3

16px

1

2

3

24px

1

2

3

32px

1

2

3

razor

<FodStack Gap="Spacing.None">No gap</FodStack>
<FodStack Gap="Spacing.Spacing4">4px gap</FodStack>
<FodStack Gap="Spacing.Spacing8">8px gap</FodStack>
<FodStack Gap="Spacing.Spacing16">16px gap</FodStack>
<FodStack Gap="Spacing.Spacing24">24px gap</FodStack>
<FodStack Gap="Spacing.Spacing32">32px gap</FodStack>

Alignment

Control cross-axis alignment with the Align property.

Align: Stretch

Short

Tall

Medium

Align

razor

<FodStack Align="StackAlign.Stretch">Stretch (default)</FodStack>
<FodStack Align="StackAlign.Start">Align start</FodStack>
<FodStack Align="StackAlign.Center">Align center</FodStack>
<FodStack Align="StackAlign.End">Align end</FodStack>
<FodStack Align="StackAlign.Baseline">Align baseline</FodStack>

Justification

Control main-axis distribution with the Justify property.

Justify: Start

A

B

C

Justify

razor

<FodStack Justify="StackJustify.Start">Justify start</FodStack>
<FodStack Justify="StackJustify.Center">Justify center</FodStack>
<FodStack Justify="StackJustify.End">Justify end</FodStack>
<FodStack Justify="StackJustify.SpaceBetween">Space between</FodStack>
<FodStack Justify="StackJustify.SpaceAround">Space around</FodStack>
<FodStack Justify="StackJustify.SpaceEvenly">Space evenly</FodStack>

Wrap Behavior

Enable wrapping for row stacks when items exceed container width.

Wrap Disabled (overflow)

1

2

3

4

5

6

7

8

Wrap Enabled

1

2

3

4

5

6

7

8

razor

<FodStack Direction="StackDirection.Row" Wrap="false">
    Items overflow container
</FodStack>

<FodStack Direction="StackDirection.Row" Wrap="true">
    Items wrap to next line
</FodStack>

RTL Support

Stack automatically adapts to RTL (right-to-left) layouts. Row direction reverses in RTL context.

LTR (default)

First

Second

Third

RTL

First

Second

Third

razor

&lt;div dir="ltr"&gt;
    &lt;FodStack Direction="StackDirection.Row"&gt;
        &lt;div&gt;First&lt;/div&gt;
        &lt;div&gt;Second&lt;/div&gt;
    &lt;/FodStack&gt;
&lt;/div&gt;

&lt;div dir="rtl"&gt;
    &lt;FodStack Direction="StackDirection.Row"&gt;
        &lt;div&gt;First&lt;/div&gt;
        &lt;div&gt;Second&lt;/div&gt;
    &lt;/FodStack&gt;
&lt;/div&gt;

API Reference

FodStack component properties and their descriptions.

No properties defined.