Stack

danger

This component will be marked as deprecated and removed in an upcoming version of the component library.

Please avoid using this component in new implementations and consider replacing its current implementation with dhl-grid-container in combination with dhl-grid-cell.

A layout utility Stack component used to stack elements and apply spacing between. Supports both horizontal and vertical direction.

Import

React

// with @dhl-official/react-library:
import { DhlStack } from "@dhl-official/react-library"

// with @dhl-official/ui-libraries/react-library:
import { DhlStack } from "@dhl-official/ui-libraries/react-library"

Angular

If the DUIL has been installed, you can use the web component directly:

<dhl-stack></dhl-stack>

Vue.js

// with @dhl-official/vue-library:
import { DhlStack } from "@dhl-official/vue-library"

// with @dhl-official/ui-libraries/vue-library:
import { DhlStack } from "@dhl-official/ui-libraries/vue-library"

Assumes children follow the following CSS properties:

.flex-child {
  align-items: flex-start;
  justify-content: flex-start;
  wrap: nowrap;
}

Code

React

<DhlStack>
    <DhlButton>0</DhlButton>
    <DhlButton>1</DhlButton>
    <DhlButton>2</DhlButton>
    <DhlButton>3</DhlButton>
</DhlStack>

Angular

<dhl-stack>
    <dhl-button>0</dhl-button>
    <dhl-button>1</dhl-button>
    <dhl-button>2</dhl-button>
    <dhl-button>3</dhl-button>
</dhl-stack>

Vue.js

<DhlStack>
    <DhlButton>0</DhlButton>
    <DhlButton>1</DhlButton>
    <DhlButton>2</DhlButton>
    <DhlButton>3</DhlButton>
</DhlStack>

info

It is highly recommended to use Design Tokens for spacing values.

However, other valid values are supported if passed as string e.g. "auto" or "12px" for custom cases.

Interactive Demo

Readme

Properties

Property	Attribute	Description	Type	Default
direction	direction	An optional prop used to define the flex-direction of the flex container.	"column" \| "column-reverse" \| "row" \| "row-reverse"	undefined
gap	gap	An optional prop used to define the gap of the flex container.	string	"var(--dui-size-space-0)"
h	h	[DEPRECATED] An optional prop used to define the height of the flex container.	string	"auto"
height	height	An optional prop used to define the height of the flex container.	string	"auto"
m	m	[DEPRECATED] An optional prop used to define the margin of the flex container.	string	"var(--dui-size-space-0)"
margin	margin	An optional prop used to define the margin of the flex container.	string	"var(--dui-size-space-0)"
p	p	[DEPRECATED] An optional prop used to define the padding of the flex container.	string	"var(--dui-size-space-0)"
padding	padding	An optional prop used to define the padding of the flex container.	string	"var(--dui-size-space-0)"
w	w	[DEPRECATED] An optional prop used to define the width of the flex container.	string	"var(--dui-size-space-full)"
width	width	An optional prop used to define the width of the flex container.	string	"var(--dui-size-space-full)"
wrap	wrap	An optional prop used to define the flex-wrap of the flex container.	"inherit" \| "initial" \| "nowrap" \| "revert" \| "revert-layer" \| "unset" \| "wrap" \| "wrap-reverse"	undefined

Slots

Slot	Description
"unnamed"	unnamed children slot for elements to be aligned by DhlStack

Dependencies

Depends on

• dhl-flex

Graph

---

Built by DHL User Interface Library Team!