Porsche Design System

Tabs

Table of Contents

Gradient color
Active Tab

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="auto">
<head>
  <title></title>
</head>
<body class="bg-base">

<p-tabs gradient-color="background-surface">
  <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="auto">
<head>
  <title></title>
</head>
<body class="bg-base">

<p-tabs active-tab-index="1">
  <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>