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.

  • 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

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.

Callable

  • Returns ReactNode

Events

onClosed: (args: CustomEvent<IgrExpansionPanel>) => void

Emitted after the expansion panel is closed.

Type declaration

onClosing: (args: CustomEvent<IgrExpansionPanel>) => void

Emitted before closing the expansion panel.

Type declaration

onOpened: (args: CustomEvent<IgrExpansionPanel>) => void

Emitted after the expansion panel is opened.

Type declaration

onOpening: (args: CustomEvent<IgrExpansionPanel>) => void

Emitted before opening the expansion panel.

Type declaration

Methods

  • 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

  • Hides the panel content.

    Returns Promise<boolean>

  • Shows the panel content.

    Returns Promise<boolean>

  • Toggles the panel open/close state.

    Returns Promise<boolean>

Properties

disabled: boolean

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

The indicator position of the expansion panel.

open: boolean

Indicates whether the contents of the control should be visible.

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