DÁP Design System - Tab webcomponent

Tab

Tab component is a web component that displays a tabbed interface. It can be used to switch between different sections of content.

Design system docs

Examples

Default tab

Tab items must be used with the dap-ds-tab-group component. The dap-ds-tab component is used to create a tab. The tabId attribute is used to identify the tab and it is mandantory. The content of the tab is placed inside the content slot.

<dap-ds-tab-group>
<dap-ds-tab tabId="first">
  Tab 1
  <div slot="content">
    Content 1
  </div>
</dap-ds-tab>
<dap-ds-tab tabId="Second">
  Tab 2
  <div slot="content">
    Content 2
  </div>
</dap-ds-tab>
<dap-ds-tab tabId="Third">
  Tab 3
  <div slot="content">
    Content 3
  </div>
</dap-ds-tab>
</dap-ds-tab-group>

Custom tab

Tabs can be customized with icons or other components. It can accept any component as a child.

<dap-ds-tab-group>
<dap-ds-tab tabId="first">
  <dap-ds-stack direction="row">
    <dap-ds-icon name="home-6-line"></dap-ds-icon>
    Home
  </dap-ds-stack>
  <div slot="content">
    Content 1
  </div>
</dap-ds-tab>
<dap-ds-tab tabId="Second">
  Tab 2
  <div slot="content">
    Content 2
  </div>
</dap-ds-tab>
<dap-ds-tab tabId="Third" disabled>
  Tab 3
  <div slot="content">
    Content 3
  </div>
</dap-ds-tab>
</dap-ds-tab-group>

Sizes

Tabs can be small or large. Default size is sm

<dap-ds-stack>
<dap-ds-tab-group size="sm">
  <dap-ds-tab tabId="first">
    Tab 1
    <div slot="content">
      Content 1
    </div>
  </dap-ds-tab>
  <dap-ds-tab tabId="Second">
    Tab 2
    <div slot="content">
      Content 2
    </div>
  </dap-ds-tab>
  <dap-ds-tab tabId="Third">
    Tab 3
    <div slot="content">
      Content 3
    </div>
  </dap-ds-tab>
</dap-ds-tab-group>
<dap-ds-tab-group size="lg">
  <dap-ds-tab tabId="first">
    Tab 1
    <div slot="content">
      Content 1
    </div>
  </dap-ds-tab>
  <dap-ds-tab tabId="Second">
    Tab 2
    <div slot="content">
      Content 2
    </div>
  </dap-ds-tab>
  <dap-ds-tab tabId="Third">
    Tab 3
    <div slot="content">
      Content 3
    </div>
  </dap-ds-tab>
</dap-ds-tab-group>
</dap-ds-stack>

Mobile

Tabs can be stacked on mobile devices with the mobile attribute.

<dap-ds-tab-group mobile>
<dap-ds-tab tabId="first">
  Tab 1
  <div slot="content">
    Content 1
  </div>
</dap-ds-tab>
<dap-ds-tab tabId="Second">
  Tab 2
  <div slot="content">
    Content 2
  </div>
</dap-ds-tab>
<dap-ds-tab tabId="Third">
  Tab 3
  <div slot="content">
    Content 3
  </div>
</dap-ds-tab>
</dap-ds-tab-group>

Importing

import { DapDSTab } from 'dap-design-system/dist/dds'

Importing React

import { DapDSTabReact } from 'dap-design-system/dist/react'

Slots

Name	Description
`(default)`	The tab title template.
`content`	The tab content.

Attributes

Property	Type	Default	Description
`tabId`	`string`		The tab id.
`disabled`	`boolean`	`false`	The disabled state of the tab.

Events

No custom events available.

CSS Parts

Part Name	Description
`base`	The main tab content container.