Open Source

React Expansion Panel Overview

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

React Expansion Panel Example

Usage

First, you need to the install the corresponding Ignite UI for React npm package by running the following command:

npm install igniteui-react

You will then need to import the IgrExpansionPanel, its necessary CSS, and register its module, like so:

import { IgrExpansionPanel } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

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

<IgrExpansionPanel>
  <span slot="title">Golden Retriever</span>
  <span slot="subtitle">Medium-large gun dog</span>
  <span>
    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 breeds 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.
  </span>
</IgrExpansionPanel>

Binding to events

The Expansion Panel component raises the following events:

Closed - Raised when the expansion panel is collapsed
Opened - Raised when the expansion panel is expanded
Closing - Raised when the expansion panel starts collapsing
Opening - 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 Opened and Closed events:

Component Customization

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

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

Recommended Elements for Slots

When slotting content into the title and subtitle slots, we recommend using <span> elements rather than heading elements (<h1>–<h6>). Heading elements carry built-in styling (such as font size, line height, and margins) that can interfere with the component’s intended typography and layout. Using a <span> gives you a neutral container that inherits the component’s styles cleanly.

The indicator slot is intended for icon-like content. We recommend using the <igc-icon> component for this purpose. Alternatively, if you don’t want to use an icon for the indicator, a <span> element can be used to display text, symbols, or emojis.

<IgrExpansionPanel>
  <span slot="title">Golden Retriever</span>
  <span slot="subtitle">Medium-large gun dog</span>
  <IgrIcon slot="indicator" name="arrow_forward"></IgrIcon>
</IgrExpansionPanel>

The Ignite UI for React 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 IgrExpansionPanel 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);
}