React Visão geral do painel de expansão

    O Painel de Expansão Ignite UI for React é um componente de acordeão leve que pode ser renderizado em dois estados - recolhido ou expandido. O painel de expansão pode ser alternado usando o clique do mouse ou interações com o teclado.

    React Expansion Panel Example

    Usage

    Primeiro, você precisa instalar o pacote npm Ignite UI for React correspondente executando o seguinte comando:

    npm install igniteui-react

    Você precisará importar o IgrExpansionPanel CSS necessário e registrar seu módulo, assim:

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

IgrExpansionPanelModule.register();

    A maneira mais simples de começar a usar o IgrExpansionPanel é a seguinte:

    <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:

    • Fechado - Levantado quando o painel de expansão é recolhido
    • Aberto - Elevado quando o painel de expansão é expandido
    • Fechamento - Levantado quando o painel de expansão começa a desmoronar
    • Abertura - Elevada quando o painel de expansão começa a se expandir

    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.

    Podemos fazer isso vinculando aos Opened eventos and Closed:

    Component Customization

    O IgrExpansionPanel controle permite que todos os tipos de conteúdo sejam adicionados dentro de seu corpo. Ele pode renderizar entradas, gráficos e até outros painéis de expansão!

    O IgrExpansionPanel permite fácil personalização do cabeçalho através dos slots de título, subtítulo e indicador expostos.

    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

    A navegação do teclado do Painel de Expansão do Ignite UI for React é compatível com os padrões de acessibilidade do W3C e conveniente de usar.

    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

    O IgrExpansionPanel componente expõe várias partes CSS, dando a você controle total sobre seu estilo:

    Nome Descrição
    header O contêiner do indicador de expansão, título e subtítulo.
    title O contêiner de título.
    subtitle O contêiner de legendas.
    indicator O contêiner do indicador.
    content O wrapper de conteúdo do painel de expansão. 
    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