menu

Stacks

Show code
<VStack>
    @for (var i = 1; i <= 3; i++)
    {
        var j = i;
        <Button>@j</Button>
    }
</VStack>
Show code
<VStack Spacing="Spacing.None">
    @for (var i = 1; i <= 3; i++)
    {
        var j = i;
        <Button>@j</Button>
    }
</VStack>
Show code
<HStack>
    @for (var i = 1; i <= 3; i++)
    {
        var j = i;
        <Button>@j</Button>
    }
</HStack>
Show code
<VStack>
    @foreach (var heightAlignment in Enum.GetValues<HeightAlignment>())
    {
        <HStack HeightAlignment="heightAlignment">
            <Button Size="Size.Small">Small</Button>
            <Button>Medium</Button>
            <Button Size="Size.Large">Large</Button>
        </HStack>
    }
</VStack>
Show code
<VStack>
    @foreach (var stackBehaviour in Enum.GetValues<StackBehaviour>())
    {
        <HStack StackBehaviour="stackBehaviour">
            <StackWeight Weight="null">
                <Button Size="Size.Small">Left</Button>
            </StackWeight>
            <StackWeight Weight="null">
                <Button>Center</Button>
            </StackWeight>
            <StackWeight Weight="null">
                <Button Size="Size.Large">Right</Button>
            </StackWeight>
        </HStack>
    }
</VStack>
Show code
<HStack>
    <StickyStack>
        <Pad Sides="Side.TopBottom">
            <Paper Color="ColorLayer.Layer3">
                <Pad>
                    <VStack>
                        @for (var i = 1; i <= 30; i++)
                        {
                            var j = i;
                            <Button Style="Style.Glass">@j</Button>
                        }
                    </VStack>
                </Pad>
            </Paper>
        </Pad>
    </StickyStack>
    <VStack>
        @for (var i = 1; i <= 100; i++)
        {
            var j = i;
            <Button Style="Style.Glass">@j</Button>
        }
    </VStack>
</HStack>
An unhandled error has occurred.