Wrap

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 Wrap component used to automatically wrap children at the MD breakpoint.

Import

React

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

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

Angular

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

<dhl-wrap></dhl-wrap>

Vue.js

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

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

Code

React

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

Angular

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

Vue.js

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

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

Slots

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

Dependencies

Depends on

• dhl-flex

Graph

---

Built by DHL User Interface Library Team!