Stack

Stack components provide rules and structure for other components using flexible layouts. Stacks serve as a layout for components and allow nesting of other stacks and components.

Component Status

React

Up to date

Usage


                                                        
                                                        
                                                            import { Button, Card, Stack, StackItem } from '@optimus-web/core';
                                                        
                                                        <Stack spacing="300" distribution="stretch">
                                                            <StackItem contentFit>
                                                                <Card />
                                                            </StackItem>
                                                            <Stack
                                                                spacing="200"
                                                                distribution="space-between"
                                                                phoneOnly={{
                                                                    spacing: '50',
                                                                    distribution: undefined,
                                                                }}
                                                                largePhoneMax={{
                                                                    vertical: true,
                                                                }}
                                                                tabletMax={{
                                                                    distribution: 'space-between',
                                                                }}
                                                                desktopUp={{
                                                                    distribution: 'space-around',
                                                                }}
                                                            >
                                                                <Button wide>Share</Button>
                                                                <Button wide variant="primary">
                                                                    View more
                                                                </Button>
                                                            </Stack>
                                                        </Stack>
                                                        
                                                            

Storybook

Open example in our Storybook

Storybook failed to load. Please connect to the VPN to access.

API

Stack

Name

Description

Type

Default

children

Items of Stack

ReactNode

undefined

spacing?

Defines the spacing between items

Spacings

undefined

vertical?

Defines if the Stack is vertical

StackVerticalVariants

undefined

distribution?

Defines how the items should be distributed

StackDistribution

undefined

alignment?

Defines how the whole Stack should be aligned

StackAlignment

undefined

itemAlignment?

Defines how the items should be aligned

StackAlignment

undefined

fill?

Defines if Stack should fill the surrounding space

boolean

undefined

wrap?

Defines if Stack should wrap around the surrounding space

boolean

undefined

inline?

Defines if Stack should behave like an inline element

boolean

undefined

ResponsiveIntervals

See responsive documentation

 

 

StackItem

Name

Description

Type

Default

padding?

Defines the padding for an item part of Stack

Spacings

undefined

contentFit?

Defines if the item should fit the content

boolean

undefined

width?

Defines the width of the item

string

undefined

minWidth?

Defines the minimum width of the item

string

undefined

maxWidth?

Defines the max width of the item

string

undefined

grow?

Defines if the item should grow

boolean

undefined

ResponsiveIntervals

See responsive documentation