Descripción general del panel de expansión de Web Components
El panel de expansión Ignite UI for Web Components es un componente de acordeón liviano que se puede renderizar en dos estados: contraído o expandido. El panel de expansión se puede alternar con un clic del mouse o interacciones con el teclado.
Web Components Expansion Panel Example
Usage
En primer lugar, debe instalar el Ignite UI for Web Components ejecutando el siguiente comando:
npm install igniteui-webcomponents
Antes de usarlosIgcExpansionPanelComponent, debes registrarlo de la siguiente manera:
import {defineComponents, IgcExpansionPanelComponent} from 'igniteui-webcomponents';
defineComponents(IgcExpansionPanelComponent);
Para una introducción completa al Ignite UI for Web Components, lee el tema Empezar.
La forma más sencilla de empezar a usar elIgcExpansionPanelComponent uso es la siguiente:
<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>
Binding to events
El componente Panel de expansión genera los siguientes eventos:
- igcClosed: se eleva cuando el panel de expansión está plegado
- igcOpened: elevado cuando se expande el panel de expansión
- igcClosing: se eleva cuando el panel de expansión comienza a colapsar
- igcOpening: aumenta cuando el panel de expansión comienza a expandirse
El siguiente ejemplo muestra cómo podemos añadir algo de lógica a nuestro componente para que muestre o oculte elsubtitle estado dependiendo del estado actual del panel.
Podemos hacer esto vinculando a losigcOpened emisores de eventos yigcClosed:
Component Customization
ElIgcExpansionPanelComponent control permite añadir todo tipo de contenido dentro de su cuerpo. ¡Puede renderizar la entrada, gráficos e incluso otros paneles de expansión!
EstoIgcExpansionPanelComponent permite una fácil personalización del encabezado mediante el título expuesto, el subtítulo y las ranuras de indicadores.
La configuración de la posición del indicador de expansión puede hacerse mediante laindicatorPosition propiedad del Panel de Expansión. Las opciones posibles son empezar, terminar o ninguna.
El siguiente ejemplo de código muestra cómo configurar el botón del componente para que vaya al lado derecho.
Keyboard Navigation
La navegación por teclado del panel de expansión Ignite UI for Web Components cumple con los estándares de accesibilidad del W3C y es cómoda de usar.
Combinaciones de teclas
- ALT + ↓- expande el panel enfocado
- ALT + ↑- contrae el panel enfocado
- SPACE / ENTER- alternar el estado de expansión del panel enfocado
Styling
ElIgcExpansionPanelComponent componente expone varias partes CSS, dándote control total sobre su estilo:
| Nombre | Descripción |
|---|---|
header |
El contenedor del indicador de expansión, título y subtítulo. |
title |
El contenedor de títulos. |
subtitle |
El contenedor de subtítulos. |
indicator |
El contenedor del indicador. |
content |
El contenedor de contenido del panel de expansión. |
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);
}