Web Components Expansion Panel Overview

    The Ignite UI for Web Components Expansion Panel is a lightweight accordion component which can be rendered in two states - collapsed or expanded. The expansion panel can be toggled using mouse click, or keyboard interactions.

    Web Components Expansion Panel Example

    EXAMPLE
    TS
    HTML
    ExpansionPanelUsage.css
    index.css

    Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

    Usage

    First, you need to install the Ignite UI for Web Components by running the following command:

    npm install igniteui-webcomponents
    cmd

    Before using the IgcExpansionPanelComponent, you need to register it as follows:

    import {defineComponents, IgcExpansionPanelComponent} from 'igniteui-webcomponents';
    
    defineComponents(IgcExpansionPanelComponent);
    ts

    For a complete introduction to the Ignite UI for Web Components, read the Getting Started topic.

    The simplest way to start using the IgcExpansionPanelComponent is as follows:

    <igc-expansion-panel>
        <div slot="title">Golden Retriever</div>
        <div slot="subTitle">Medium-large gun dog</div>
        <div>
            <p>The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
            and upland game birds, during hunting and shooting parties.[3] The name "retriever" refers to the breed's ability
            to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and
            are easy to train to basic or advanced obedience standards.</p>
        </div>
    </igc-expansion-panel>
    html
    Ignite UI for Web Components | CTA Banner

    Binding to events

    The Expansion Panel component raises the following events:

    • igcClosed - Raised when the expansion panel is collapsed
    • igcOpened - Raised when the expansion panel is expanded
    • igcClosing - Raised when the expansion panel starts collapsing
    • igcOpening - Raised when the expansion panel starts expanding

    The following sample demonstrates how we can add some logic to our component to make it show/hide the subtitle depending on the current state of the panel.

    We can do this by binding to the igcOpened and igcClosed event emitters:

    EXAMPLE
    TS
    HTML
    ExpansionPanelPropertiesAndEvents.css
    index.css

    Component Customization

    The IgcExpansionPanelComponent control allows all sorts of content to be added inside of its body. It can render input, charts and even other expansion panels!

    The IgcExpansionPanelComponent allows for easy customization of the header through the exposed title, subTitle and indicator slots.

    Configuring the position of the expansion indicator can be done through the indicatorPosition property of the Expansion Panel. The possible options are start, end or none.

    The next code sample demonstrates how to configure the component's button to go on the right side.

    EXAMPLE
    TS
    HTML
    ExpansionPanelCustomization.css
    index.css

    Keyboard Navigation

    The Ignite UI for Web Components Expansion Panel keyboard navigation is compliant with W3C accessibility standards and convenient to use.

    Key Combinations

    • Alt + ↓ - expands the focused panel
    • Alt + ↑ - collapses the focused panel
    • Space/Enter - toggle the expansion state of the focused panel

    Styling

    The IgcExpansionPanelComponent component exposes several CSS parts, giving you full control over its style:

    Name Description
    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.
    igc-expansion-panel {
      background-color: var(--ig-secondary-900);
      color: var(--ig-secondary-900-contrast);
    }
    
    igc-button::part(base) {
      color: var(--ig-secondary-900-contrast);
    }
    
    igc-button::part(base)::before {
      background-color: var(--ig-warn-500);
    }
    
    igc-expansion-panel::part(indicator) {
      color: var(--ig-warn-500);
    }
    
    igc-expansion-panel::part(header) {
      background-color: var(--ig-secondary-900);
    }
    
    igc-expansion-panel::part(title),
    igc-expansion-panel::part(subtitle) {
      color: var(--ig-warn-500);
    }
    css

    EXAMPLE
    TS
    HTML
    ExpansionPanelStyling.css
    index.css

    API References

    Additional Resources