Porsche Design System

Tabs

Table of Contents

Gradient color
Active Tab
Labelling

Gradient color#

If the amount of tabs exceeds the viewport, the component renders arrow-buttons to help with horizontal scrolling. The background and gradient has to align to your chosen background.

Tab Content 1

Open in Stackblitz

<!doctype html>
<html lang="en" class="scheme-light-dark">
<head>
  <title></title>
</head>
<body class="bg-canvas">

<p-tabs aria="{'aria-label': 'Some label for the tablist', 'aria-description': 'Some description for the tablist'}">
  <p-tabs-item label="Tab 1">
    <p-text>
      Tab Content 1
    </p-text>
  </p-tabs-item>
  <p-tabs-item label="Tab 2">
    <p-text>
      Tab Content 2
    </p-text>
  </p-tabs-item>
  <p-tabs-item label="Tab 3">
    <p-text>
      Tab Content 3
    </p-text>
  </p-tabs-item>
  <p-tabs-item label="Tab 4">
    <p-text>
      Tab Content 4
    </p-text>
  </p-tabs-item>
  <p-tabs-item label="Tab 5">
    <p-text>
      Tab Content 5
    </p-text>
  </p-tabs-item>
  <p-tabs-item label="Tab 6">
    <p-text>
      Tab Content 6
    </p-text>
  </p-tabs-item>
  <p-tabs-item label="Tab 7">
    <p-text>
      Tab Content 7
    </p-text>
  </p-tabs-item>
  <p-tabs-item label="Tab 8">
    <p-text>
      Tab Content 8
    </p-text>
  </p-tabs-item>
  <p-tabs-item label="Tab 9">
    <p-text>
      Tab Content 9
    </p-text>
  </p-tabs-item>
  <p-tabs-item label="Tab 10">
    <p-text>
      Tab Content 10
    </p-text>
  </p-tabs-item>
  <p-tabs-item label="Tab 11">
    <p-text>
      Tab Content 11
    </p-text>
  </p-tabs-item>
  <p-tabs-item label="Tab 12">
    <p-text>
      Tab Content 12
    </p-text>
  </p-tabs-item>
  <p-tabs-item label="Tab 13">
    <p-text>
      Tab Content 13
    </p-text>
  </p-tabs-item>
  <p-tabs-item label="Tab 14">
    <p-text>
      Tab Content 14
    </p-text>
  </p-tabs-item>
  <p-tabs-item label="Tab 15">
    <p-text>
      Tab Content 15
    </p-text>
  </p-tabs-item>
  <p-tabs-item label="Tab 16">
    <p-text>
      Tab Content 16
    </p-text>
  </p-tabs-item>
  <p-tabs-item label="Tab 17">
    <p-text>
      Tab Content 17
    </p-text>
  </p-tabs-item>
  <p-tabs-item label="Tab 18">
    <p-text>
      Tab Content 18
    </p-text>
  </p-tabs-item>
  <p-tabs-item label="Tab 19">
    <p-text>
      Tab Content 19
    </p-text>
  </p-tabs-item>
  <p-tabs-item label="Tab 20">
    <p-text>
      Tab Content 20
    </p-text>
  </p-tabs-item>
</p-tabs>
<script>

</script>
</body>
</html>

Active Tab#

You may need to change the initial active tab. To do so, set the active-tab-index attribute of p-tabs. Make sure to update the activeTabIndex when adding or removing elements.

Tab Content Two

Open in Stackblitz

<!doctype html>
<html lang="en" class="scheme-light-dark">
<head>
  <title></title>
</head>
<body class="bg-canvas">

<p-tabs active-tab-index="1" aria="{'aria-label': 'Some label for the tablist', 'aria-description': 'Some description for the tablist'}">
  <p-tabs-item label="Tab One">
    <p-text>
      Tab Content One
    </p-text>
  </p-tabs-item>
  <p-tabs-item label="Tab Two">
    <p-text>
      Tab Content Two
    </p-text>
  </p-tabs-item>
  <p-tabs-item label="Tab Three">
    <p-text>
      Tab Content Three
    </p-text>
  </p-tabs-item>
</p-tabs>
<script>

</script>
</body>
</html>

Labelling#

Use the aria property to provide an accessible name and optional description for the tablist. This is especially helpful when multiple tab groups appear on the same page or when the tab labels alone do not convey enough context for assistive technologies.

Tab Content One

Open in Stackblitz

<!doctype html>
<html lang="en" class="scheme-light-dark">
<head>
  <title></title>
</head>
<body class="bg-canvas">

<p-tabs aria="{'aria-label': 'Some label for the tablist', 'aria-description': 'Some description for the tablist'}">
  <p-tabs-item label="Tab One">
    <p-text>
      Tab Content One
    </p-text>
  </p-tabs-item>
  <p-tabs-item label="Tab Two">
    <p-text>
      Tab Content Two
    </p-text>
  </p-tabs-item>
  <p-tabs-item label="Tab Three">
    <p-text>
      Tab Content Three
    </p-text>
  </p-tabs-item>
</p-tabs>
<script>

</script>
</body>
</html>