Spacer

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 duil310-dhl-grid-container in combination with duil310-dhl-grid-cell.

A layout utility Spacer component, used in conjuction with the Flex component to span 100% of the available empty space between child components.

Import

React

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

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

Angular

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

<duil310-dhl-spacer></duil310-dhl-spacer>

Vue.js

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

<duil310-dhl-spacer></duil310-dhl-spacer>

Code

React

<DhlFlex>
  <DhlButton>0</DhlButton>
  <DhlButton>1</DhlButton>
  <DhlSpacer />
  <DhlButton>2</DhlButton>
  <DhlButton>3</DhlButton>
</DhlFlex>

Angular

<duil310-dhl-flex>
  <duil310-dhl-button>0</duil310-dhl-button>
  <duil310-dhl-button>1</duil310-dhl-button>
  <duil310-dhl-spacer />
  <duil310-dhl-button>2</duil310-dhl-button>
  <duil310-dhl-button>3</duil310-dhl-button>
</duil310-dhl-flex>

Vue.js

<duil310-dhl-flex>
  <duil310-dhl-button>0</duil310-dhl-button>
  <duil310-dhl-button>1</duil310-dhl-button>
  <duil310-dhl-spacer />
  <duil310-dhl-button>2</duil310-dhl-button>
  <duil310-dhl-button>3</duil310-dhl-button>
</duil310-dhl-flex>

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

---

Built by DHL User Interface Library Team!