VStack

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 VStack component used to stack elements and apply spacing in the vertical direction only.

Import

React

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

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

Angular

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

<dhl-vstack></dhl-vstack>

Vue.js

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

// with @dhl-official/ui-libraries/vue-library:
import { DhlVStack } 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

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

Angular

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

Vue.js

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

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
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)"

Slots

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

Dependencies

Depends on

• dhl-flex

Graph

---

Built by DHL User Interface Library Team!