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

No CSS parts available.