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, IgrExpansionPanelModule } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrExpansionPanelModule.register();

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

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

    O componente Painel de Expansão gera os seguintes eventos:

    • 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

    O exemplo a seguir demonstra como podemos adicionar alguma lógica ao nosso componente para fazê-lo mostrar/ocultar a subtitle dependendo do estado atual do painel.

    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.

    A configuração da posição do indicador de expansão pode ser feita por meio da propriedade indicatorPosition do Painel de Expansão. As opções possíveis são start, end ou none.

    O próximo exemplo de código demonstra como configurar o botão do componente para ficar no lado direito.

    Keyboard Navigation

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

    Combinações de teclas

    • Alt + ↓- expande o painel em foco
    • Alt + ↑- recolhe o painel em foco
    • Espaço / Enter- alterna o estado de expansão do painel em foco

    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);
}

    API References

    Additional Resources