Descripción general de los componentes del acordeón Angular
¿Qué es el acordeón Angular?
Angular Accordion es un componente GUI para crear paneles verticales expandibles con encabezados en los que se puede hacer clic y secciones de contenido asociadas, que se muestran en un solo contenedor. El acordeón se usa comúnmente para reducir la necesidad de desplazarse por varias secciones de contenido en una sola página. Ofrece navegación por teclado y API para controlar el estado de expansión de los paneles subyacentes.
Los usuarios pueden interactuar y navegar entre una lista de elementos, como miniaturas o etiquetas. Cada uno de esos elementos se puede alternar (expandir o contraer) para revelar la información que contiene. Dependiendo de la configuración, puede haber uno o varios elementos expandidos a la vez.
El siguiente es un ejemplo básico de acordeón Angular de una sección de preguntas frecuentes. Funciona como un acordeón, con secciones que funcionan individualmente. Puede alternar cada bloque de texto con un solo clic, mientras expande varios paneles al mismo tiempo. De esta manera puedes leer la información más fácilmente, sin tener que ir y venir entre un panel que se expande y se contrae automáticamente, que oculta la sección abierta previamente cada vez.
En él podrás ver cómo definir un igx-accrodion y sus paneles de expansión. El ejemplo también demuestra los dos tipos de comportamiento de expansión. El botón de cambio establece la propiedad singleBranchExpand para alternar entre una y varias ramas que se expandirán a la vez.
<igx-switch [(ngModel)]="singleBranchExpand">Single Branch Expand</igx-switch><articleclass="sample-wrapper"><igx-accordion #accordion [singleBranchExpand]="singleBranchExpand"><igx-expansion-panel><igx-expansion-panel-header><igx-expansion-panel-title>
What has changed about subscription and pricing model?
</igx-expansion-panel-title></igx-expansion-panel-header><igx-expansion-panel-body>
We have moved to a subscription-based pricing model for all our developer tools. This makes it easier
for you to manage your license subscriptions and allows us to provide a better level of service for you.
We updated our pricing and packages to provide you with flexible options and the best value. This
includes <ahref="https://www.infragistics.com/products/ignite-ui">Ignite UI </a>(formerly Ignite UI for
JavaScript) which includes all of our JavaScript framework
components for web development, including: Angular, ASP.NET (Core and MVC), Blazor, JQuery, React and
Web Components), as well as Infragistics Professional, Infragistics Ultimate, our Ultimate UI products.
We also offer multi-year subscriptions options with a built-in discount, so you can see the value up
front. With these updates we are confident that we are providing the best platforms and the best price.
</igx-expansion-panel-body></igx-expansion-panel><igx-expansion-panel><igx-expansion-panel-header><igx-expansion-panel-title>Who will the updated changes impact?</igx-expansion-panel-title></igx-expansion-panel-header><igx-expansion-panel-body><divclass="body-container">
The license updates will impact all new and current customers using Ignite UI, Infragistics Professional
and Infragistics Ultimate. Specifically, we have also made updates to our product and packaging for
Ignite UI for JavaScript, Ignite UI for Angular, Ignite UI for React and Ignite UI for Web components.
For more information, please refer to this blog:
<ahref="https://www.infragistics.com/community/blogs/b/jason_beres/posts/announcement-changes-to-ignite-ui-product-packaging">Announcement:
Changes to Ignite UI Product & Packaging</a>
The pricing has been updated for all products and packages. So, all new or additional licenses will be
sold based on our new pricing and packages. All existing license agreements will be honored and renewed
based upon the current agreement.
</div></igx-expansion-panel-body></igx-expansion-panel><igx-expansion-panel><igx-expansion-panel-header><igx-expansion-panel-title>What is the difference between your old model and your current subscription
model
for Ignite UI?</igx-expansion-panel-title></igx-expansion-panel-header><igx-expansion-panel-body>
For Ignite UI customers, we are moving away from NPM for licensed packages. The current NPM packages
will be replaced with packages that include a “Trial Version” watermark. Licensed packages for Ignite UI
will be available from our cloud hosted ProGet server.
For more information, please refer to this article:
<ahref="https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/ignite-ui-licensing">Moving
from Trial to Licensed Ignite UI NPM Packages
</a></igx-expansion-panel-body></igx-expansion-panel><igx-expansion-panel><igx-expansion-panel-header><igx-expansion-panel-title>What happens if I don't renew my subscription?</igx-expansion-panel-title></igx-expansion-panel-header><igx-expansion-panel-body>
Any unlicensed or trial versions of Ignite UI for Angular, React and Web Components will now include
this watermark.
</igx-expansion-panel-body></igx-expansion-panel><igx-expansion-panel><igx-expansion-panel-header><igx-expansion-panel-title>If I don't renew my subscription will
I still have access to previous versions of Infragistics products?
</igx-expansion-panel-title></igx-expansion-panel-header><igx-expansion-panel-body>
Any version of Infragistics software which you have downloaded can continue to be used perpetually.
Access to download any new or previous versions through our customer portal and package feeds will
require maintaining an active subscription by continuing to renew it.
</igx-expansion-panel-body></igx-expansion-panel></igx-accordion></article>html
¿Te gusta esta muestra? Obtenga acceso a nuestro completo kit de herramientas Ignite UI for Angular y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Primeros pasos con Ignite UI for Angular Accordion
Para comenzar con el componente Ignite UI for Angular Accordion, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:
ng add igniteui-angular
cmd
Para obtener una introducción completa a la Ignite UI for Angular, lea el tema de introducción.
El siguiente paso es importar IgxAccordionModule en su archivo app.module.ts.
Alternativamente, a partir de 16.0.0, puede importar IgxAccordionComponent como una dependencia independiente o usar el token IGX_ACCORDION_DIRECTIVES para importar el componente y todos sus componentes y directivas de soporte.
Ahora que ha importado el módulo o las directivas Ignite UI for Angular Accordion, puede comenzar con una configuración básica del igx-accordion y sus paneles.
Usando el descriptor de acceso de paneles puede obtener una referencia a la colección que contiene todos los paneles de expansión secundarios del igx-accordion.
@ViewChild('accordion', { static: true })
public accordion!: IgxAccordionComponent;
this.accordion.panels;
typescript
Como se demostró anteriormente, la propiedad singleBranchExpand le brinda la posibilidad de establecer si se pueden expandir uno o varios paneles a la vez.
Animaciones de acordeón Angular
Angular Accordion admite animaciones para acciones de expansión y contracción de los paneles. El comportamiento de la animación se puede personalizar. Normalmente, las animaciones se pueden configurar para cada panel de expansión individualmente. Sin embargo, también podría aplicarse a todos los paneles a la vez en el nivel IgxAccordionComponent. Esto brinda a los usuarios la capacidad de deshabilitar animaciones para todas las secciones a la vez a través de la propiedad de animaciones de IgxAccordionComponent.
En cuanto a la animación, tienes dos opciones. Primero, puedes configurar la propiedad animationSettings en el componente acordeón:
Como puede ver, estamos usando animaciones slideInLeft y slideOutRight de nuestro conjunto de animaciones incorporado para hacer que el contenido del componente aparezca desde el lado izquierdo y desaparezca hacia la derecha al contraer el contenido. Personalizamos aún más las animaciones anulando algunos de sus parámetros.
El siguiente fragmento demuestra cómo pasar la configuración de animación al componente:
Con el componente Angular Accordion, puede personalizar la apariencia del encabezado y del panel de contenido. El siguiente ejemplo demuestra cómo se pueden implementar opciones de filtrado elaboradas utilizando la funcionalidad de plantillas incorporada de IgxExpansionPanel.
En el siguiente ejemplo de acordeón Angular, crearemos una sección compleja de preguntas frecuentes para ilustrar cómo puede abordar este escenario de aplicación común. En el ejemplo, el IgxAccordionComponent anidado se logra agregando un acordeón dentro del cuerpo de un panel de expansión.
<igx-switch [(ngModel)]="singleBranchExpand">Single Branch Expand</igx-switch><articleclass="sample-wrapper"><igx-accordion #accordion [singleBranchExpand]="singleBranchExpand"><igx-expansion-panel><igx-expansion-panel-header><igx-expansion-panel-title>
What has changed about subscription and pricing model?
</igx-expansion-panel-title></igx-expansion-panel-header><igx-expansion-panel-body>
We have moved to a subscription-based pricing model for all our developer tools. This makes it easier
for you to manage your license subscriptions and allows us to provide a better level of service for you.
We updated our pricing and packages to provide you with flexible options and the best value. This
includes <ahref="https://www.infragistics.com/products/ignite-ui">Ignite UI </a>(formerly Ignite UI for
JavaScript) which includes all of our JavaScript framework
components for web development, including: Angular, ASP.NET (Core and MVC), Blazor, JQuery, React and
Web Components), as well as Infragistics Professional, Infragistics Ultimate, our Ultimate UI products.
We also offer multi-year subscriptions options with a built-in discount, so you can see the value up
front. With these updates we are confident that we are providing the best platforms and the best price.
</igx-expansion-panel-body></igx-expansion-panel><igx-expansion-panel><igx-expansion-panel-header><igx-expansion-panel-title>
Who will the updated changes impact?
</igx-expansion-panel-title></igx-expansion-panel-header><igx-expansion-panel-body>
The license updates will impact all new and current customers using Ignite UI, Infragistics Professional
and Infragistics Ultimate. Specifically, we have also made updates to our product and packaging for
Ignite UI for JavaScript, Ignite UI for Angular, Ignite UI for React and Ignite UI for Web components.
For more information, please refer to this blog:
<ahref="https://www.infragistics.com/community/blogs/b/jason_beres/posts/announcement-changes-to-ignite-ui-product-packaging">Announcement:
Changes to Ignite UI Product & Packaging</a>
The pricing has been updated for all products and packages. So, all new or additional licenses will be
sold based on our new pricing and packages. All existing license agreements will be honored and renewed
based upon the current agreement.
</igx-expansion-panel-body></igx-expansion-panel><igx-expansion-panel><igx-expansion-panel-header><igx-expansion-panel-title>
What is the difference between your old model and your current subscription model for Ignite UI?
</igx-expansion-panel-title></igx-expansion-panel-header><igx-expansion-panel-body>
For Ignite UI customers, we are moving away from NPM for licensed packages. The current NPM packages
will be replaced with packages that include a “Trial Version” watermark. Licensed packages for Ignite UI
will be available from our cloud hosted ProGet server.
For more information, please refer to this article:
<ahref="https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/ignite-ui-licensing">Moving
from Trial to Licensed Ignite UI NPM Packages</a></igx-expansion-panel-body></igx-expansion-panel><igx-expansion-panel><igx-expansion-panel-header><igx-expansion-panel-title>
Common questions about renewal.
</igx-expansion-panel-title></igx-expansion-panel-header><igx-expansion-panel-bodyclass="nested-accordion"><igx-accordion #nestedAccordion><igx-expansion-panel><igx-expansion-panel-header><igx-expansion-panel-title>
What happens if I don't renew my subscription?
</igx-expansion-panel-title></igx-expansion-panel-header><igx-expansion-panel-body>
Any unlicensed or trial versions of Ignite UI for Angular, React and Web Components will now
include
this watermark.
</igx-expansion-panel-body></igx-expansion-panel><igx-expansion-panel><igx-expansion-panel-header><igx-expansion-panel-title>
If I don't renew my subscription will I still have access to previous versions of
Infragistics products?
</igx-expansion-panel-title></igx-expansion-panel-header><igx-expansion-panel-body>
Any version of Infragistics software which you have downloaded can continue to be used
perpetually.
Access to download any new or previous versions through our customer portal and package
feeds will
require maintaining an active subscription by continuing to renew it.
</igx-expansion-panel-body></igx-expansion-panel><igx-expansion-panel><igx-expansion-panel-header><igx-expansion-panel-title>
Will I be automatically charged for my renewal/ Can I be automatically charged for
renewal?
</igx-expansion-panel-title></igx-expansion-panel-header><igx-expansion-panel-body>
Any new subscriptions purchased online, via our eCommerce system, will renew automatically.
Subscription
renewal can be canceled, at any time, before the next automatic renewal date. Subscriptions
purchased
directly from Infragistics or Infragistics' partners are subject to the renewal terms that
were agreed
upon as part of that purchase.
</igx-expansion-panel-body></igx-expansion-panel></igx-accordion></igx-expansion-panel-body></igx-expansion-panel><igx-expansion-panel><igx-expansion-panel-header><igx-expansion-panel-title>
I split my work across two computers. Can I install on both using my single-user license?
</igx-expansion-panel-title></igx-expansion-panel-header><igx-expansion-panel-body>
The Infragistics Ultimate license is tied to the user, and not the computer. That means you're welcome
to install and use Ignite UI, Infragistics Professional, and Infragistics Ultimate on any computer you
use. However, if we notice a large number of activations using the same license, we may contact you to
verify this behavior.
</igx-expansion-panel-body></igx-expansion-panel><igx-expansion-panel><igx-expansion-panel-header><igx-expansion-panel-title>
I used up my trial for an earlier version of Infragistics Ultimate. Can I start a new trial when a
major
version is released?
</igx-expansion-panel-title></igx-expansion-panel-header><igx-expansion-panel-body>
Yes! If you have tried a previous version in the past, and used up your 30-day trial, you can try the
next major version for another 30 days! You can do this in the following two ways:
<ul><li>If you have days remaining in your 30-day trial period for the current version (e.g., the
Version 15.1 Volume Release), use the Check for Update option inside the Platform Installer or
your account. You will be able to start a fresh trial for the next major version (e.g., 20.1
Volume Release)</li><li>If you have used up the 30-day trial for the previous major version (e.g., the 19.2 Volume
Release), simply download and install Infragistics Ultimate from our <ahref="https://www.infragistics.com/products/ultimate">website</a> (This will also allow you
to start a new trial.)</li></ul></igx-expansion-panel-body></igx-expansion-panel></igx-accordion></article>html
La navegación con el teclado en la Ignite UI for Angular Accordion proporciona una rica variedad de interacciones con el teclado para el usuario final. Esta funcionalidad está habilitada de forma predeterminada y permite a los usuarios finales navegar fácilmente a través de los paneles. La navegación de IgxAccordionComponent cumple con los estándares de accesibilidad W3C y es fácil de usar.
Combinaciones de teclas
Tabulador: mueve el foco al primer panel (si el foco está antes del acordeón)/siguiente
Mayús + Tabulador: mueve el foco al último (si el foco está después del acordeón)/panel anterior
Flecha hacia abajo: mueve el foco al panel de abajo
Flecha hacia arriba: mueve el foco al panel de arriba
Alt + Flecha abajo: expande el panel enfocado en el acordeón
Alt + Flecha arriba: colapsa el panel enfocado en el acordeón
Shift + Alt + Flecha abajo: expande todos los paneles habilitados (si singleBranchExpand está configurado en verdadero, expande el último panel habilitado)
Shift + Alt + Flecha arriba: colapsa todos los paneles habilitados
Inicio: navega al PRIMER panel habilitado en el acordeón
Fin: navega al ÚLTIMO panel habilitado en el acordeón
Por diseño, hay un margen establecido para los paneles expandidos, en caso de que estén colocados dentro de un igx-accordion. Para modificarlo hay una propiedad expuesta dentro del tema igx-expansion-panel. Para aprovechar las funciones expuestas por el motor de temas, tenemos que importar el archivo index en nuestro archivo de estilo:
@use"igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:// @import '~igniteui-angular/lib/core/styles/themes/index';scss
Siguiendo el enfoque más simple, creamos un nuevo tema que extiende el expansion-panel-theme y acepta los parámetros an,and $header-focus-background $expanded-margin $body-color.