Tab Item

<tpg-tab-item></tpg-tab-item>

Tab Item organize and allow navigation between groups of content that are related and at the same level of hierarchy.

Each Tab Item should contain content that is distinct from other tabs in a set. A maximum of 3 Tab Items per single line is recommended; each tab shall be framed in its defined background.

Tab items should not be used alone, and should instead be used in conjuction wih the Tab Bar component.

Examples

Basic

Component

Code

  <div style="width: 200px;">
      <tpg-tab-item label="Hello" value="hello"> </tpg-tab-item>
  </div>

With badge

Component

Code

  <div style="width: 200px;">
      <tpg-tab-item label="Hello" value="hello">
          <tpg-badge slot="badge" label="Badge"></tpg-badge>
      </tpg-tab-item>
  </div>

With icons

Component

Vanilla JS

  <tpg-tab-item label="Leading icon" value="hello"
      class="has-leading-icon"
  > </tpg-tab-item>

  <tpg-tab-item label="Trailing icon" value="hello"
      class="has-trailing-icon"
  > </tpg-tab-item>

  <tpg-tab-item label="Both" value="hello"
      class="has-trailing-icon has-leading-icon"
  > </tpg-tab-item>


  <script>
      document.addEventListener('DOMContentLoaded', ()=>{
          // Adds placeholder icons onto breadcrumbs with relevant class applied
          const tabItemsWithTrailingIcon = document.querySelectorAll('tpg-tab-item.has-trailing-icon');
          const tabItemsWithLeadingIcon = document.querySelectorAll('tpg-tab-item.has-leading-icon');

          for (const tabItem of tabItemsWithTrailingIcon) {
              const tabItem = elem as TabItem;
              tabItem.trailingMenuIconTemplate = tpgIconPlaceholderCustom;
          }

          for (const tabItem of tabItemsWithLeadingIcon) {
              const tabItem = elem as TabItem;
              tabItem.leadingIconTemplate = tpgIconPlaceholderCustom;
          }
      });
  </script>

React

      <tpg-tab-item label="Leading icon" value="hello"
          leading-icon-template={tpgIconPlaceholderCustom}
      ></tpg-tab-item>
      <tpg-tab-item label="Trailing icon" value="hello"
          trailing-icon-template={tpgIconPlaceholderCustom}
      ></tpg-tab-item>
      <tpg-tab-item label="Both" value="hello"
          leading-icon-template={tpgIconPlaceholderCustom}
          trailing-icon-template={tpgIconPlaceholderCustom}
      ></tpg-tab-item>

Properties

Attribute	Property	Description	Type	Default Value
label	label	Text to be displayed in the tab item.	string	''
value	value	The value of the component.	string	''
leading-icon-template	leadingIconTemplate	Leading icon to be displayed in the tab item.	IconConstant | ''	''
trailing-icon-template	trailingIconTemplate	Trailing icon to be displayed in the tab item.	IconConstant | ''	''
selected	selected	Sets the item's selected state without emitting events. Used for setting initial state or for resetting a selected item by parent component.	boolean	false
disabled	disabled	If the tab item is disabled or not	boolean	false

Events

Event name	Reactjs attribute	Description
No events found.

Sandbo

Tables

Properties

Attribute	Property	Description	Type	Default Value
label	label	Text to be displayed in the tab item.	string	''
value	value	The value of the component.	string	''
leading-icon-template	leadingIconTemplate	Leading icon to be displayed in the tab item.	IconConstant | ''	''
trailing-icon-template	trailingIconTemplate	Trailing icon to be displayed in the tab item.	IconConstant | ''	''
selected	selected	Sets the item's selected state without emitting events. Used for setting initial state or for resetting a selected item by parent component.	boolean	false
disabled	disabled	If the tab item is disabled or not	boolean	false

Events

Event name	Reactjs attribute	Description
No events found.

Functions

Name	Description	Arguments
No functions found.

Slots

Name	Description
badge	resereved for the tpg-badge component

CSS Parts

Attribute	Description
No CSS parts found.

Sandbox