Porsche Design System

Tabs Bar

Table of Contents

Links
Gradient color

Links#

Open in Stackblitz

<!doctype html>
<html lang="en" class="auto">
<head>
  <title></title>
</head>
<body class="bg-base">

<p-tabs-bar>
  <a href="https://porsche.com" target="_blank">
    Tab One
  </a>
  <a href="https://porsche.com" target="_blank">
    Tab Two
  </a>
  <a href="https://porsche.com" target="_blank">
    Tab Three
  </a>
</p-tabs-bar>
<script>

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

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.

Open in Stackblitz

<!doctype html>
<html lang="en" class="auto">
<head>
  <title></title>
</head>
<body class="bg-base">

<p-tabs-bar gradient-color="background-surface">
  <button type="button">
    Tab 0
  </button>
  <button type="button">
    Tab 1
  </button>
  <button type="button">
    Tab 2
  </button>
  <button type="button">
    Tab 3
  </button>
  <button type="button">
    Tab 4
  </button>
  <button type="button">
    Tab 5
  </button>
  <button type="button">
    Tab 6
  </button>
  <button type="button">
    Tab 7
  </button>
  <button type="button">
    Tab 8
  </button>
  <button type="button">
    Tab 9
  </button>
  <button type="button">
    Tab 10
  </button>
  <button type="button">
    Tab 11
  </button>
  <button type="button">
    Tab 12
  </button>
  <button type="button">
    Tab 13
  </button>
  <button type="button">
    Tab 14
  </button>
  <button type="button">
    Tab 15
  </button>
  <button type="button">
    Tab 16
  </button>
  <button type="button">
    Tab 17
  </button>
  <button type="button">
    Tab 18
  </button>
  <button type="button">
    Tab 19
  </button>
</p-tabs-bar>
<script>
  const pTabsBar = document.querySelector("p-tabs-bar");
  pTabsBar.addEventListener('update', (e) => e.target.activeTabIndex = e.detail.activeTabIndex);
</script>
</body>
</html>