Modal

The Modal component is used as a dialog for bringing focus to information with an overlay on primary content.

Import

React

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

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

Angular

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

<dhl-modal></dhl-modal>

Vue.js

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

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

Usage

The Modal utilizes the Card component and accepts the same header and footer slot configuration (which refers to the Card header and footer)

A Modal can be triggered:

• By attaching a state trigger through the isOpen prop or is-open attribute.

Please ensure a dataId / data-id is supplied to the Modal for initialisation

Code

Please note, the below code-snippets are specific to the Modal itself - see above for information on how to trigger a Modal.

React

<DhlModal>  
  <DhlHeadline slot="header" designLevel="4" noMargin dataId="dialog-headline">
    Header
  </DhlHeadline>
  <DhlText>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
    commodo ligula eget dolor. Aenean massa. Cum sociis natoque
    penatibus et magnis dis parturient montes, nascetur.
  </DhlText>
  <DhlButton slot="footer">Button</DhlButton>
</DhlModal>

Angular

<dhl-modal>  
  <dhl-headline slot="header" designLevel="4" noMargin dataId="dialog-headline">
    Header
  </dhl-headline>
  <dhl-text>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
    commodo ligula eget dolor. Aenean massa. Cum sociis natoque
    penatibus et magnis dis parturient montes, nascetur.
  </dhl-text>
  <dhl-button slot="footer">Button</dhl-button>
</dhl-modal>

Vue.js

<dhl-modal>  
  <dhl-headline slot="header" designLevel="4" :noMargin="true" dataId="dialog-headline">
    Header
  </dhl-headline>
  <dhl-text>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
    commodo ligula eget dolor. Aenean massa. Cum sociis natoque
    penatibus et magnis dis parturient montes, nascetur.
  </dhl-text>
  <dhl-button slot="footer">Button</dhl-button>
</dhl-modal>

Interactive Demo

Migrating from DUIL 1.0

• Rename onClose to handleOnClose
• Rename isStatic to trapFocus
• Add handleOnShow prop for function call when dialog open

Readme

Properties

Property	Attribute	Description	Type	Default
closeButtonAriaLabel	close-button-aria-label	An optional prop defining the text read by the screen reader to represent the inner Modal close Button.	string	undefined
dataAriaDescribedby	data-aria-describedby	An optional prop defining the list of reference IDs (separated by spaces), recommended when you want to an error message on your field.	string	undefined
dataAriaLabelledby	data-aria-labelledby	An optional ariaLabelledby prop that establishes the relationships between objects and their label(s), and its value should be one or more element IDs, which refer to elements that have the text needed for labelling. List multiple element IDs in a space delimited fashion.	string	undefined
dataCardAriaLabel	data-card-aria-label	An optional prop defining the text read by the screen reader to represent the Card within the Modal.	string	undefined
dataClassName	data-class-name	An optional class name prop for the component.	string	undefined
dataId	data-id	An optional prop. Gives a valid HTML ID attribute value for the component.	string	dhl-modal-${getRandomString()}
dataTestid	data-testid	An optional prop. The test id attached to the component as a data-testid attribute.	string	undefined
handleOnClose	--	An optional function to be called when the Modal is closed.	() => void	undefined
handleOnShow	--	An optional function to be called when the Modal is shown.	() => void	undefined
isOpen	is-open	An optional boolean prop used to toggle the visibility of the Modal	boolean	false
overlayColor	overlay-color	An optional prop used to set the css background color of the Modal overlay	string	defaultOverlayColor
shouldShowCloseButton	should-show-close-button	An optional boolean prop used to toggle the visibility of the close button. The Modal retains ability to be closed through esc key, or overlay click (unless trapFocus is set to true)	boolean	true
trapFocus	trap-focus	An optional prop used to prevent Modal closing through an overlay click. If set, Modal can only be closed via the inner close icon or by a custom implementation.	boolean	false

Events

Event	Description	Type
dhlModalHide	Event emitted when the modal is hidden	CustomEvent<any>
dhlModalShow	Event emitted when the modal is shown	CustomEvent<any>

Slots

Slot	Description
"footer"	used for elements intended to be positioned as the DhlCard footer within DhlModal
"header"	used for elements intended to be positioned as the DhlCard header within DhlModal
"unnamed"	unnamed children slot for Modal content

Dependencies

Depends on

• dhl-card
• dhl-button

Graph

---

Built by DHL User Interface Library Team!