Blazor Expansion Panel Overview

    The Ignite UI for Blazor 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.

    Blazor Expansion Panel Example

    Usage

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

    Binding to events

    The Expansion Panel component raises the following events:

    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.

    Component Customization

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

    The IgbExpansionPanel 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.

    Keyboard Navigation

    The Ignite UI for Blazor 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 IgbExpansionPanel 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);
    }
    

    API References

    Additional Resources