Skip to main content

Stack

The Stack component is used to arrange child components in a vertical or horizontal stack, with optional spacing and alignment.

import dash
from dash import html
import yipit_dash_mui_components as dmc

dash._dash_renderer._set_react_version('18.2.0')

app = dash.Dash(__name__)

app.layout = dmc.YipitMUIProvider(
    children=[
        html.Div([
            dmc.Stack(
                direction="row",
                spacing=2,
                children=[
                    dmc.Box(style={"width": "100px", "height": "100px", "backgroundColor": "primary.main"}),
                    dmc.Box(style={"width": "100px", "height": "100px", "backgroundColor": "secondary.main"}),
                    dmc.Box(style={"width": "100px", "height": "100px", "backgroundColor": "error.main"})
                ]
            )
        ])
    ]
)

if __name__ == "__main__":
    app.run_server(debug=True)

Props Table​

Below are the main props available for the Stack component.

PropTypeDefaultDescription
direction'row' | 'column''column'Direction of the stack layout.
spacingnumber0Space between child components.
alignItems'flex-start' | 'center' | 'flex-end''stretch'Alignment of child components along the cross axis.
justifyContent'flex-start' | 'center' | 'space-between' | 'space-around' | 'space-evenly''flex-start'Alignment of child components along the main axis.

For the full list of props, refer to the official MUI documentation, as this component is based on MUI:

MUI Stack Documentation