Panel

A Panel must be used as a direct child of the Accordion component. its aim is to group content and a heading together.
The heading is used to toggle the visibility of the content via a named slot heading.

Import

React

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

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

Angular

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

<dhl-panel></dhl-panel>

Vue.js

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

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

Code

React

<DhlPanel>
  <span slot="heading">First heading</span>
  <DhlText>This is the content related to the first headline</DhlText>
</DhlPanel>

Angular

<dhl-panel>
  <span slot="heading">First heading</span>
  <dhl-text>This is the content related to the first headline</dhl-text>
</dhl-panel>

Vue.js

<dhl-panel>
  <span slot="heading">First heading</span>
  <dhl-text>This is the content related to the first headline</dhl-text>
</dhl-panel>

Interactive Demo

### Readme

Properties

Property	Attribute	Description	Type	Default
buttonAlign	button-align	An optional prop that sets alignment of the button should the buttonOnly prop be set to true.	"center" \| "end" \| "start"	DHL_PANEL.BUTTON_ALIGN.START
buttonOnly	button-only	An optional prop used to set the variant of the accordion panel to a dhl-button component.	boolean	undefined
buttonVariant	button-variant	An optional prop used to set the variant of button used when the buttonOnly prop is set to true.	"primary" \| "text"	DHL_PANEL.BUTTON_VARIANT.PRIMARY
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-panel-${getRandomString()}
dataTestid	data-testid	An optional prop. The test id attached to the component as a data-testid attribute.	string	undefined
expanded	expanded	An optional prop that toggles if the panel is expanded	boolean	false
headingId	heading-id	An optional prop used to set the id of taggable Accordion heading - used to enable accessibility features	string	${this.dataId}-heading-id
headingTag	heading-tag	An optional prop. Defines which headline tag to use. (h1-h6).	"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "p"	DHL_PANEL.HEADING_TAG.H1
isDisabled	is-disabled	An optional flag to define if the component is disabled.	boolean	false
panelId	panel-id	An optional prop used to set the id of taggable Accordion panel - used to enable accessibility features	string	${this.dataId}-panel-id

Events

Event	Description	Type
dhlExpand	The event emitted to dhl-accordion which includes information about the expanded status	CustomEvent<{ expanded: boolean; }>

Slots

Slot	Description
"heading"	used to supply the component headline text
"unnamed"	unnamed children slot for component content

Dependencies

Depends on

• dhl-headline
• dhl-button

Graph

---

Built by DHL User Interface Library Team!