Class IgcExpansionPanelComponent

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.

igc-expansion-panel

  • 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

igcOpening - Emitted before opening the expansion panel.

igcOpened - Emitted after the expansion panel is opened.

igcClosing - Emitted before closing the expansion panel.

igcClosed - Emitted after the expansion panel is closed.

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.

Hierarchy

Hierarchy

  • EventEmitterInterface<IgcExpansionPanelComponentEventMap, this> & LitElement<this>
    • IgcExpansionPanelComponent

Other

disabled: boolean = false

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

indicatorPosition: "none" | "end" | "start" = 'start'

The indicator position of the expansion panel.

indicator-position

open: boolean = false

Indicates whether the contents of the control should be visible.

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

Returns the HTML-uppercased qualified name.

MDN Reference

lifecycle

  • Invoked when the component is added to the document's DOM.

    In connectedCallback() you should setup tasks that should only occur when the element is connected to the document. The most common of these is adding event listeners to nodes external to the element, like a keydown event handler added to the window.

    connectedCallback() {
    super.connectedCallback();
    addEventListener('keydown', this._handleKeydown);
    }

    Typically, anything done in connectedCallback() should be undone when the element is disconnected, in disconnectedCallback().

    Returns void