Ignite UI for Web Components

All
  • Public
  • Public/Protected
  • All

Class IgcTabsComponent

Represents tabs component

Element

igc-tabs

Fires

igcChange - Emitted when the selected tab changes.

Slot

  • Renders the tab header.

Slot

panel - Renders the tab content.

Csspart

headers - The wrapper of the tabs including the headers content and the scroll buttons.

Csspart

headers-content - The container for the tab headers.

Csspart

headers-wrapper - The wrapper for the tab headers and the selected indicator.

Csspart

headers-scroll - The container for the headers.

Csspart

selected-indicator - The selected indicator.

Csspart

start-scroll-button - The start scroll button displayed when the tabs overflow.

Csspart

end-scroll-button - The end scroll button displayed when the tabs overflow.

Csspart

content - The container for the tabs content.

Hierarchy

Hierarchy

  • EventEmitterInterface<IgcTabsEventMap, this> & LitElement<this>
    • IgcTabsComponent

Constructors

Properties

Accessors

Methods

Constructors

Abstract constructor

Properties

activation

activation: "auto" | "manual" = 'auto'

Determines the tab activation. When set to auto, the tab is instantly selected while navigating with the Left/Right Arrows, Home or End keys and the corresponding panel is displayed. When set to manual, the tab is only focused. The selection happens after pressing Space or Enter.

Attr

alignment

alignment: "center" | "end" | "start" | "justify" = 'start'

Sets the alignment for the tab headers

Attr

Static styles

styles: CSSResult = styles

Static Readonly tagName

tagName: "igc-tabs" = 'igc-tabs'

Accessors

selected

Methods

disconnectedCallback

  • Returns void

emitEvent

  • Type parameters

    Type Parameters

    Parameters

    • type: K
    • Optional eventInitDict: CustomEventInit<D>

    Returns boolean

select

  • Selects the specified tab and displays the corresponding panel.

    Parameters

    • name: string

    Returns void

Static register