Skip to main content
Skip table of contents

Stack

Overview

Stack is a collection of independent components that work together to support the execution of an application. The components are arranged in a hierarchy, one on top of the other, and may comprise an operating system, architectural layers, protocols, runtime environments, databases, and function calls.

Please refer to this for more information: https://mui.com/material-ui/react-stack/.

Import

CODE
import { Stack } from '@mui/material';

The above source will be imported automatically after dragging and dropping the Basic Component to the UI Preview Panel.

Property

Property:

Name

Default

Description

Id-name

Placeholder: <id-name>

The Id-name of the created component.

Default Style

Direction: None

The Default Style of the created component includes Direction.

State

State: Normal

The State of the created Component.

Margin and Padding

Size Unit: Px

The component Margin and Padding with many selectable Size Units.

Size

Size Unit: Px

The component Size of Width and Height with many selectable Size Units.

Layout

Position: None

Size Unit: Px

The component Layout includes Position and Top - Right - Bottom - Left with many selectable Size Units.

Text

Text: Menu Item

Font-family: None

Size Unit: Px

Font-weight: None

Text align: Left

The component Text includes Text, Font-family, Font-size, Font-weight, Size Unit, Font-color, Text-align.

General

Visibility: None

Opacity: 100%

Size Unit: Px

The component General includes Spacing, Visibility, Opacity, and Background.

Advanced Style

The component Advanced Style includes Classname and Inline Style addition.

 Code Sample:

CODE
<Stack
          sx={{':active': {'margin': '15px 20px 20px 15px','padding': '15px 20px 20px 15px',
              'width': '150px','height': '200px',
              'position': 'absolute','top': '15px','right': '20px','bottom': '20px','left': '20px',
              'fontFamily': 'Noto-Sans',
              'fontSize': '15px',
              'fontWeight': 'lighter',
              'color': '#ce0000ff',
              'textAlign': 'center',
              'visibility': 'hidden',
              'opacity': 0.71,
              'backgroundColor': '#0100ffff',},}}
               direction="column-reverse"
               label="Label1"
               spacing={15}>
</Stack>

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.