Tabs

The Tabs component can be used to improve the organization and navigation of content by displaying multiple content sections within a single view and allowing the user to switch between them through a tabbed interface.

Import

React

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

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

Angular

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

<dhl-tabs></dhl-tabs>

Vue.js

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

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

Direct children of the Tabs component can use the data-attributes label and disabled. <li> is used as an example here because it is used internally too, but technically it could be any tag element.

Code

React

<DhlTabs>
  <li data-label="Letters">
    <h1>An example header</h1>
    <p>Content</p>
    <DhlButton>This is a button</DhlButton>
  </li>
  <li data-label="Container" data-disabled>
    <h1>Yet another header</h1>
    <p>Content</p>
    <DhlButton>This is a button</DhlButton>
  </li>
</DhlTabs>

Angular

<dhl-tabs>
  <li data-label="Letters">
    <h1>An example header</h1>
    <p>Content</p>
    <dhl-button>This is a button</dhl-button>
  </li>
  <li data-label="Container" data-disabled>
    <h1>Yet another header</h1>
    <p>Content</p>
    <dhl-button>This is a button</dhl-button>
  </li>
</dhl-tabs>

Vue.js

<dhl-tabs>
  <li data-label="Letters">
    <h1>An example header</h1>
    <p>Content</p>
    <dhl-button>This is a button</dhl-button>
  </li>
  <li data-label="Container" data-disabled>
    <h1>Yet another header</h1>
    <p>Content</p>
    <dhl-button>This is a button</dhl-button>
  </li>
</dhl-tabs>

Interactive Demo

Migrating from DUIL 1.0

• Rename onChange to changeEvent
• Prefix props label and disabled with data on li elements
• Remove custom labels

Changelog

v2.4.1-monorepo.8

Breaking changes

• Deprecating isBlock property.
• Add isFullWidth property - sets the tab container to 100% width of the parent container.

Readme

Overview

The dhl-tabs component can be used to display a set of tabs that allow users to navigate between different sections. It comes with built-in support for customizable text and optional icons.

Usage

Default usage

<dhl-tabs>
  <li data-label="Tab 1">
    <h1>An example header</h1>
    <p>Content</p>
  </li>
  <li data-label="Tab 2">
    <h1>Yet another header</h1>
    <p>Content</p>
  </li>
</dhl-tabs>

Disabled tab

<dhl-tabs>
  <li data-label="Tab 1">
    <h1>An example header</h1>
    <p>Content</p>
  </li>
  <li
    data-label="Tab 2"
    data-disabled
  >
    <h1>Yet another header</h1>
    <p>Content</p>
  </li>
</dhl-tabs>

Usage with icons, icon orientation and icon size

<dhl-tabs>
  <li
    data-label="Tab 1"
    data-icon="Airport"
    data-icon-orientation="left"
    data-icon-size="sm"
  >
    <h1>An example header</h1>
    <p>Content</p>
  </li>
  <li data-label="Tab 2">
    <h1>Yet another header</h1>
    <p>Content</p>
  </li>
</dhl-tabs>

Properties

Property	Attribute	Description	Type	Default
changeEvent	--	The onChange event, triggered when the active tab is changed, activeTabIndex is passed as parameter	(activeTabIndex: number) => void	undefined
dataAriaLabel	data-aria-label	An optional prop defining the text read by the screen reader to represent the component; use this if you need different text to be read from label.	string	undefined
dataClassName	data-class-name	An optional prop for the class of the root element.	string	undefined
dataId	data-id	An optional prop. Gives a valid HTML ID attribute value for the component.	string	dhl-tabs-${getRandomString()}
dataTestid	data-testid	An optional prop. The test id attached to the component as a data-testid attribute.	string	undefined
initialActiveIndex	initial-active-index	The current active tab index	number	0
isBlock	is-block	[DEPRECATED] An optional prop that sets whether the component should inherit the width of it's container.	boolean	false
isFullWidth	is-full-width	An optional prop that sets the component to 100% width of it's parent container.	boolean	false
variant	variant	An optional prop to select a component design variant.	"bottom" \| "top"	DHL_TABS.VARIANT.BOTTOM

Dependencies

Depends on

• dhl-button

Graph

---

Built by DHL User Interface Library Team!