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
Angular
Vue.js

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

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

<dhl-panel></dhl-panel>

// 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
Angular
Vue.js

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

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

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

Interactive Demo

Variants

Expanded Panel

Use expanded when the panel content should be visible on initial render.

React
Angular
Vue.js

<DhlAccordion>
  <DhlPanel expanded>
    <span slot="heading">Shipment status</span>
    <DhlText>
      Your parcel has reached the regional sorting facility and is being
      prepared for the next transport leg.
    </DhlText>
  </DhlPanel>
</DhlAccordion>

<dhl-accordion>
  <dhl-panel expanded>
    <span slot="heading">Shipment status</span>
    <dhl-text>
      Your parcel has reached the regional sorting facility and is being
      prepared for the next transport leg.
    </dhl-text>
  </dhl-panel>
</dhl-accordion>

<dhl-accordion>
  <dhl-panel :expanded="true">
    <span slot="heading">Shipment status</span>
    <dhl-text>
      Your parcel has reached the regional sorting facility and is being
      prepared for the next transport leg.
    </dhl-text>
  </dhl-panel>
</dhl-accordion>

Shipment status

Your parcel has reached the regional sorting facility and is being prepared for the next transport leg.

Borderless Panel

Use noBorder when the surrounding surface already provides clear separation.

React
Angular
Vue.js

<DhlAccordion>
  <DhlPanel expanded noBorder>
    <span slot="heading">Additional information</span>
    <DhlText>
      Use a borderless panel when the surrounding surface already provides
      clear separation.
    </DhlText>
  </DhlPanel>
</DhlAccordion>

<dhl-accordion>
  <dhl-panel expanded no-border>
    <span slot="heading">Additional information</span>
    <dhl-text>
      Use a borderless panel when the surrounding surface already provides
      clear separation.
    </dhl-text>
  </dhl-panel>
</dhl-accordion>

<dhl-accordion>
  <dhl-panel :expanded="true" :noBorder="true">
    <span slot="heading">Additional information</span>
    <dhl-text>
      Use a borderless panel when the surrounding surface already provides
      clear separation.
    </dhl-text>
  </dhl-panel>
</dhl-accordion>

Additional information

Use a borderless panel when the surrounding surface already provides clear separation.

Readme

Properties

Property	Attribute	Description	Type	Default
`clickEvent`	`click-event`	An optional onClick callback handler.	`(e: any) => void`	`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-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`
`iconType`	`icon-type`	An optional prop that selects the expand/collapse icon set.	`"chevron" \| "plus-minus"`	`undefined`
`isDisabled`	`is-disabled`	An optional flag to define if the component is disabled.	`boolean`	`false`
`noBorder`	`no-border`	An optional prop used to remove the top and bottom border lines from the panel.	`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`
`variant`	`variant`	An optional prop used to set the visual style variant.	`"border" \| "naked" \| "no-border"`	`undefined`

Events

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

Methods

`panelOnReady() => Promise<HTMLDhlPanelElement>`

Returns

Type: Promise<HTMLDhlPanelElement>

Slots

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

Dependencies

Depends on

Graph

Built by DHL User Interface Library Team!

Import

Code​

Interactive Demo​

Variants​

Expanded Panel​

Borderless Panel​

Readme​

Properties​

Events​

Methods​

panelOnReady() => Promise<HTMLDhlPanelElement>​

Returns​

Slots​

Dependencies​

Depends on​

Graph​