Selected Tab Indicator

Component behavior

Inert. Purely a graphical element.

Examples

The selected tab indicator is meant as a helper component for others, mainly tpg-tab-item.

By itself (you probably shouldn’t use this)

Component

Code

  <div style="display:flex; flex-direction: column; align-items: center; gap: 1rem; width: 30%">
      <tpg-selected-tab-indicator></tpg-selected-tab-indicator>
      <tpg-selected-tab-indicator active></tpg-selected-tab-indicator>
  </div>

As applied in tab item

Component

Code

    <tpg-tab-item
      label="Example of a selected tab item"
      selected
      emphasis='x-high-emphasis'
    ></tpg-tab-item>
    <tpg-tab-item
      label="Example of a disabled tab item"
      disabled
      selected
      emphasis='x-high-emphasis'
    ></tpg-tab-item>

Tables

Properties

Attribute	Property	Description	Type	Default Value
active	active	Whether or not the tab item is visible. Another alternative is setting the color of the indicator directly with the --tabIndicatorFill from parent component.	boolean	false

Events

Event name	Reactjs attribute	Description
No events found.

Functions

Name	Description	Arguments
No functions found.

Slots

Name	Description
No slots found.

CSS Parts

Attribute	Description
No CSS parts found.

Sandbox