The Expansion Panel Component provides a way to display information in a toggleable way - compact summary view containing title and description and expanded detail view containing additional content to the summary header.
Element
igc-expansion-panel
Slots
default — renders the default content of the panel
title — renders the title of the panel's header
subtitle — renders the subtitle of the panel's header
indicator — renders the expand/collapsed indicator
indicator-expanded — renders the expanded state of the indicator
CSS Parts
header — The container of the expansion indicator, title and subtitle.
title — The title container.
subtitle — The subtitle container.
indicator — The indicator container.
content — The expansion panel's content wrapper.

Constructors

Section titled "Constructors"

IgcExpansionPanelComponent 

new IgcExpansionPanelComponent(): IgcExpansionPanelComponent

Defined in src/components/expansion-panel/expansion-panel.ts:98

Returns IgcExpansionPanelComponent

Properties

Section titled "Properties"

disabled

Section titled "disabled"

Get/Set whether the expansion panel is disabled. Disabled panels are ignored for user interactions.

 
disabled: boolean = false

Defined in src/components/expansion-panel/expansion-panel.ts:89

indicatorPosition

Section titled "indicatorPosition"

The indicator position of the expansion panel.

 
indicatorPosition: ExpansionPanelIndicatorPosition = 'start'

Defined in src/components/expansion-panel/expansion-panel.ts:96

open

Section titled "open"

Indicates whether the contents of the control should be visible.

 
open: boolean = false

Defined in src/components/expansion-panel/expansion-panel.ts:82

styles

Section titled "styles" 
styles: CSSResult[]

Defined in src/components/expansion-panel/expansion-panel.ts:61

tagName

Section titled "tagName"

The tagName read-only property of the Element interface returns the tag name of the element on which it's called.

MDN Reference

 
tagName: "igc-expansion-panel" = 'igc-expansion-panel'

Defined in src/components/expansion-panel/expansion-panel.ts:60

Methods

Section titled "Methods"

addEventListener

Section titled "addEventListener"

Inherited from: EventEmitterMixin< IgcExpansionPanelComponentEventMap, Constructor<LitElement> >(LitElement) 

addEventListener(type: K, listener: object, options: boolean | AddEventListenerOptions): void

Defined in src/components/common/mixins/event-emitter.ts:7

Parameters

  • type: K
  • listener: object
  • options: boolean | AddEventListenerOptions

Returns void

connectedCallback

Section titled "connectedCallback" 
connectedCallback(): void

Defined in src/components/expansion-panel/expansion-panel.ts:113

Returns void

emitEvent

Section titled "emitEvent"

Inherited from: EventEmitterMixin< IgcExpansionPanelComponentEventMap, Constructor<LitElement> >(LitElement) 

emitEvent(type: K, eventInitDict: CustomEventInit<D>): boolean

Defined in src/components/common/mixins/event-emitter.ts:30

Parameters

  • type: K
  • eventInitDict: CustomEventInit<D>

Returns boolean

hide

Section titled "hide"

Hides the panel content.

 
hide(): Promise<boolean>

Defined in src/components/expansion-panel/expansion-panel.ts:168

Returns Promise<boolean>

removeEventListener

Section titled "removeEventListener"

Inherited from: EventEmitterMixin< IgcExpansionPanelComponentEventMap, Constructor<LitElement> >(LitElement) 

removeEventListener(type: K, listener: object, options: boolean | EventListenerOptions): void

Defined in src/components/common/mixins/event-emitter.ts:17

Parameters

  • type: K
  • listener: object
  • options: boolean | EventListenerOptions

Returns void

show

Section titled "show"

Shows the panel content.

 
show(): Promise<boolean>

Defined in src/components/expansion-panel/expansion-panel.ts:176

Returns Promise<boolean>

toggle

Section titled "toggle"

Toggles the panel open/close state.

 
toggle(): Promise<boolean>

Defined in src/components/expansion-panel/expansion-panel.ts:163

Returns Promise<boolean>

register

Section titled "register" 
register(): void

Defined in src/components/expansion-panel/expansion-panel.ts:64

Returns void

Events

Section titled "Events"

igcClosed

Section titled "igcClosed" 
igcClosed: CustomEvent<IgcExpansionPanelComponent>

Defined in src/components/expansion-panel/expansion-panel.ts:27

igcClosing

Section titled "igcClosing" 
igcClosing: CustomEvent<IgcExpansionPanelComponent>

Defined in src/components/expansion-panel/expansion-panel.ts:26

igcOpened

Section titled "igcOpened" 
igcOpened: CustomEvent<IgcExpansionPanelComponent>

Defined in src/components/expansion-panel/expansion-panel.ts:25

igcOpening

Section titled "igcOpening" 
igcOpening: CustomEvent<IgcExpansionPanelComponent>

Defined in src/components/expansion-panel/expansion-panel.ts:24