Stack

a container that stacks contents on top of each other

Storybook

CodeSandbox

Github

Using Grommet for HPE?See Stack examples and guidance.

Props

a11yTitle

Custom label to be used by screen readers. When provided, an aria-label will be added to the element.

string

"a user friendly label for screen readers"

alignSelf

How to align along the cross axis when contained in a Box or along the column axis when contained in a Grid.

string

"start"

"center"

"end"

"stretch"

"baseline"

anchor

Where to anchor children from. If not specified, children fill the guiding child's area.

string

"center"

"top"

"left"

"bottom"

"right"

"top-left"

"top-right"

"bottom-left"

"bottom-right"

fill

Whether to expand to fill all of the available width and height in the parent container.

string

"horizontal"

"vertical"

boolean

true

false

gridArea

The name of the area to place this inside a parent Grid.

string

"a parent grid area name"

guidingChild

Which child to guide layout from. All other children will be positioned within that area. Defaults to 'first'.

number

string

"first"

"last"

interactiveChild

Which child to restrict user interaction to. All other children will have user interaction disabled.

number

string

"first"

"last"

margin

The amount of margin around the component.

string

"none"

"xxsmall"

"xsmall"

"small"

"medium"

"large"

"xlarge"

object

Can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.


{
    vertical: "...",
    horizontal: "...",
    top: "...",
    bottom: "...",
    left: "...",
    right: "..."
}

React/DOM Properties

At its core, the Stack component is a regular <div> element. Thus, both DOM and React properties, methods, and events are accessible. To read up on all of the possible DOM attributes and types available for div elements, check out this MDN Web Documents page. To learn more about DOM events and methods, you can read more on the MDN Web Events documentation page.

Also, feel free to read about the types of React events available, or see how DOM attributes change in React. Working in tandem with Styled Components, you also have access to the as property.

Theme

stack.extend

Any additional style for the control of the Stack component.

string

Any CSS.

css`color: 'blue'`

function

(props) => {}