Descripción general del acordeón Web Components

El Ignite UI for Web Components Accordion es un componente de GUI para construir 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.

Web Components Accordion Example

El siguiente es un ejemplo básico de Ignite UI for Web Components Acordeón 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 este modo, se puede 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, lo que oculta la sección previamente abierta cada vez.

En él podrás ver cómo definir un acordeón 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 singleExpand para alternar entre una y varias ramas que se expandirán a la vez.

import { defineComponents, IgcAccordionComponent, IgcExpansionPanelComponent, IgcSwitchComponent } from "igniteui-webcomponents";
import "igniteui-webcomponents/themes/light/bootstrap.css";
import "./AccordionOverview.css";

defineComponents(IgcAccordionComponent, IgcSwitchComponent);
export class AccordionOverview {
    private accordion: IgcAccordionComponent;
    private switch: IgcSwitchComponent;

    constructor() {
        this.accordion = document.getElementById("accordion") as IgcAccordionComponent;
        this.switch = document.getElementById("switch") as IgcSwitchComponent;

        this.switch.addEventListener("igcChange", (ev: CustomEvent) => {
            this.accordion.singleExpand = ev.detail.checked;
        });
    }
}

new AccordionOverview();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Accordion Overview</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <igc-switch id="switch">Single Expand</igc-switch>
      <div class="sample-wrapper">
        <igc-accordion id="accordion">
          <igc-expansion-panel>
            <h1 slot="title">What has changed about subscription and pricing model?</h1>
            <span>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 Ignite UI
              (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.</span>
          </igc-expansion-panel>
          <igc-expansion-panel>
            <h1 slot="title">Who will the updated changes impact?</h1>
            <span>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: Announcement: Changes to Ignite UI Product & Packaging 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.</span>
          </igc-expansion-panel>
          <igc-expansion-panel>
            <h1 slot="title">What is the difference between your old model and your current subscription model for Ignite UI?</h1>
            <span>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: Moving from Trial to Licensed Ignite UI NPM Packages</span>
          </igc-expansion-panel>
          <igc-expansion-panel>
            <h1 slot="title">What happens if I don't renew my subscription?</h1>
            <span>Any unlicensed or trial versions of Ignite UI for Angular, React and Web Components will now include this watermark.</span>
          </igc-expansion-panel>
          <igc-expansion-panel>
            <h1 slot="title">If I don't renew my subscription will I still have access to previous versions of Infragistics products?</h1>
            <span>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.</span>
          </igc-expansion-panel>
        </igc-accordion>
      </div>
    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

igc-accordion {
    width: 100%;
}

.sample-wrapper {
    overflow-y: auto;
    max-height: 380px;
    margin: 8px;
}

igc-switch {
    padding: 16px;
}

igc-expansion-panel {
    border: 1px solid rgba(174, 174, 174, 0.25);
}
css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

Getting Started with Web Components Accordion

En primer lugar, debe instalar el Ignite UI for Web Components ejecutando el siguiente comando:

npm install igniteui-webcomponents
cmd

Antes de utilizar IgcAccordionComponent, debe registrarlo de la siguiente manera:

import { defineComponents, IgcAccordionComponent } from 'igniteui-webcomponents';

defineComponents(IgcAccordionComponent);
ts

Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Primeros pasos.

Ahora puede comenzar con una configuración básica del IgcAccordionComponent y sus paneles.

Usage

Cada sección del componente de acordeón Web Components se define mediante un Web Components Panel de expansión. Los paneles proporcionan Disabled y Open propiedades, que le brindan la capacidad de configurar los estados del panel según sus requisitos.

Declaring an Accordion

El acordeón envuelve todos los paneles de expansión declarados en su interior.

<igc-accordion id="accordion" single-expand="true">
    <igc-expansion-panel>
        <div slot="title">Title Panel 1</div>
        <div>
            Content Panel 1
        </div>
    </igc-expansion-panel>
    <igc-expansion-panel>
        <div slot="title">Title Panel 2</div>
        <div>
            Content Panel 2
        </div>
    </igc-expansion-panel>
</igc-accordion>
html

Usando el descriptor de acceso Panels puede obtener una referencia a la colección que contiene todos los paneles de expansión secundarios de IgcAccordionComponent.

private accordion: IgcAccordionComponent;
private panels: IgcExpansionPanelComponent[];

constructor() {
	this.accordion = document.getElementById("accordion") as IgcAccordionComponent;
	this.panels = this.accordion.panels;
}
typescript

Como se demostró anteriormente, la propiedad singleExpand le brinda la posibilidad de establecer si se pueden expandir uno o varios paneles a la vez.

Al utilizar los métodos hideAll y showAll puede contraer y expandir respectivamente todos los IgcExpansionPanelComponent del IgcAccordionComponent mediante programación.

If singleExpand property is set to true calling showAll method would expand only the focused panel.

Web Components Accordion Customization Example

Con el Web Components Accordion, puede personalizar la apariencia del encabezado y el panel de contenido.

El siguiente ejemplo demuestra cómo se pueden implementar opciones de filtrado elaboradas utilizando las ranuras integradas de IgcExpansionPanelComponent.

import {
    defineComponents,
    IgcAccordionComponent,
    IgcCheckboxComponent,
    IgcDateTimeInputComponent,
    IgcRadioComponent,
    IgcRadioGroupComponent,
    IgcRangeSliderComponent,
    IgcRatingComponent,
    registerIconFromText
} from "igniteui-webcomponents";
import "igniteui-webcomponents/themes/light/bootstrap.css";
import "./AccordionCustomization.css";

defineComponents(IgcAccordionComponent, IgcCheckboxComponent, IgcRangeSliderComponent, IgcRadioGroupComponent, IgcRadioComponent, IgcRatingComponent, IgcDateTimeInputComponent);
export class AccordionOverview {
    private categories = [
        { checked: false, type: "Bike" },
        { checked: false, type: "Motorcycle" },
        { checked: false, type: "Car" },
        { checked: false, type: "Taxi" },
        { checked: false, type: "Public Transport" }
    ];

    constructor() {
        this.registerIcons();
        document.querySelectorAll("igc-checkbox").forEach((cb: IgcCheckboxComponent) => cb.addEventListener("igcChange", this.checkCategory));
        document.querySelector("igc-range-slider")!.addEventListener("igcChange", this.changeSliderRange);
        document.querySelectorAll("igc-radio").forEach((r: IgcRadioComponent) => r.addEventListener("igcChange", this.checkRating));
        document.querySelector("igc-date-time-input")!.addEventListener("igcChange", this.hanldeTimeInput);
        document.querySelector("igc-icon[name='clear']")!.addEventListener("click", this.clearTime);
    }

    private checkCategory = (ev: CustomEvent) => {
        const type = (ev.target as IgcCheckboxComponent).textContent;
        const item = this.categories.find((c) => c.type === type);

        if (item) {
            item.checked = ev.detail.checked;
        }
        this.updateCheckedCategories();
    };

    private updateCheckedCategories() {
        let checkedItems = "";
        this.categories.forEach((item) => {
            if (item.checked) {
                checkedItems += checkedItems ? ", " + item.type : "Categories: " + item.type;
            }
        });

        const categoriesTitle = document.querySelector("h1#categories") as HTMLElement;
        categoriesTitle.textContent = checkedItems || "Categories";
    }

    private changeSliderRange = (ev: CustomEvent) => {
        const lowerSpan = document.querySelector("span#lowerCost");
        const upperSpan = document.querySelector("span#upperCost");

        lowerSpan!.textContent = ev.detail.lower;
        upperSpan!.textContent = ev.detail.upper;
    };

    private checkRating = (ev: CustomEvent) => {
        const rating = (ev.target as IgcRadioComponent).querySelector("igc-rating")!.label;
        const ratingTitle = document.querySelector("h1#rating") as HTMLElement;
        ratingTitle.textContent = "Rating: " + rating;
    };

    private hanldeTimeInput = (ev: CustomEvent) => {
        const dateTimeInput = ev.target as IgcDateTimeInputComponent;
        if (!dateTimeInput.value) {
            return;
        }
        const timeTitle = document.querySelector("h1#timeTitle") as HTMLElement;
        timeTitle.textContent = "Time: " + dateTimeInput.label + " " + dateTimeInput.value.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
    };

    private clearTime = () => {
        document.querySelector("igc-date-time-input")!.clear();
        const timeTitle = document.querySelector("h1#timeTitle") as HTMLElement;
        timeTitle.textContent = "Time";
    };

    registerIcons() {
        const clearIcon =
            "<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'><path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' /></svg>";
        registerIconFromText("clear", clearIcon, "material");

        const clockIcon =
            "<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'><path d='M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z' /></svg>";
        registerIconFromText("clock", clockIcon, "material");
    }
}

new AccordionOverview();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Accordion Customization</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="sample-wrapper">
        <igc-accordion id="accordion">
          <igc-expansion-panel>
            <h1 slot="title" id="categories">Categories</h1>
            <div class="categories-container">
              <igc-checkbox>Bike</igc-checkbox>
              <igc-checkbox>Motorcycle</igc-checkbox>
              <igc-checkbox>Car</igc-checkbox>
              <igc-checkbox>Taxi</igc-checkbox>
              <igc-checkbox>Public Transport</igc-checkbox>
            </div>
          </igc-expansion-panel>
           <igc-expansion-panel>
            <h1 slot="title">Cost: $<span id="lowerCost">200</span> to $<span id="upperCost">800</span></h1>
            <igc-range-slider min="0" max="1000" lower="200" upper="800"></igc-range-slider>
          </igc-expansion-panel>
          <igc-expansion-panel>
            <h1 slot="title" id="rating">Rating</h1>
            <igc-radio-group>
              <igc-radio name="rating">
                <igc-rating class="size-small" label="1 star or more" max="5" value="1.5" readonly></igc-rating>
              </igc-radio>
              <igc-radio name="rating">
                <igc-rating class="size-small" label="2 stars or more" max="5" value="2.5" readonly></igc-rating>
              </igc-radio>
              <igc-radio name="rating">
                <igc-rating class="size-small" label="3 stars or more" max="5" value="3.5" readonly></igc-rating>
              </igc-radio>
              <igc-radio name="rating">
                <igc-rating class="size-small" label="4 stars or more" max="5" value="4.5" readonly></igc-rating>
              </igc-radio>   
            </igc-radio-group>
          </igc-expansion-panel>
          <igc-expansion-panel>
            <h1 slot="title" id="timeTitle">Time</h1>
            <igc-date-time-input class="size-small" input-format="hh:mm tt" label="Arrive before">
              <igc-icon name="clock" collection="material" slot="prefix"></igc-icon>
              <igc-icon name="clear" collection="material" slot="suffix"></igc-icon>
            </igc-date-time-input>
          </igc-expansion-panel>
        </igc-accordion>
      </div>
    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

igc-accordion {
    width: 100%;
}

.sample-wrapper {
    overflow-y: auto;
    max-height: 530px;
    margin: 8px;
}

igc-range-slider {
    margin: 24px;
}

.categories-container {
    display: flex;
    flex-flow: column nowrap;
}

igc-checkbox,
igc-radio {
    margin: 4px 0;
}

igc-expansion-panel {
    border: 1px solid rgba(174, 174, 174, 0.25);
}

igc-rating {
    flex-direction: row;
}

.size-small {
  --ig-size: var(--ig-size-small);
}
css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Nested Web Components Accordions Scenario

En el siguiente ejemplo de Web Components acordeón se crea una compleja sección de preguntas frecuentes para ilustrar cómo se puede llevar a cabo este escenario de aplicación común. En la muestra anidado IgcAccordionComponent se consigue añadiendo un acordeón dentro de un panel de expansión.

import { defineComponents, IgcAccordionComponent, IgcExpansionPanelComponent, IgcSwitchComponent } from "igniteui-webcomponents";
import "igniteui-webcomponents/themes/light/bootstrap.css";
import "./AccordionNestedScenario.css";

defineComponents(IgcAccordionComponent, IgcSwitchComponent);
export class AccordionNestedScenario {
    private accordion: IgcAccordionComponent;
    private switch: IgcSwitchComponent;

    constructor() {
        this.accordion = document.getElementById("accordion") as IgcAccordionComponent;
        this.switch = document.getElementById("switch") as IgcSwitchComponent;

        this.switch.addEventListener("igcChange", (ev: CustomEvent) => {
            this.accordion.singleExpand = ev.detail.checked;
        });
    }
}

new AccordionNestedScenario();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Accordion Nested Scenario</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <igc-switch id="switch">Single Expand</igc-switch>
      <div class="sample-wrapper">
        <igc-accordion id="accordion">
          <igc-expansion-panel>
            <h1 slot="title">What has changed about subscription and pricing model?</h1>
            <span>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 Ignite UI
              (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.</span>
          </igc-expansion-panel>
          <igc-expansion-panel>
            <h1 slot="title">Who will the updated changes impact?</h1>
            <span>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: Announcement: Changes to Ignite UI Product & Packaging 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.</span>
          </igc-expansion-panel>
          <igc-expansion-panel>
            <h1 slot="title">What is the difference between your old model and your current subscription model for Ignite UI?</h1>
            <span>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: Moving from Trial to Licensed Ignite UI NPM Packages</span>
          </igc-expansion-panel>
          <igc-expansion-panel>
            <h1 slot="title">Common questions about renewal.</h1>
            <igc-accordion>
              <igc-expansion-panel>
                <h1 slot="title">What happens if I don't renew my subscription?</h1>
                <span>Any unlicensed or trial versions of Ignite UI for Angular, React and Web Components will now include this watermark.</span>
              </igc-expansion-panel>
              <igc-expansion-panel>
                <h1 slot="title">If I don't renew my subscription will I still have access to previous versions of Infragistics products?</h1>
                <span>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.</span>
              </igc-expansion-panel>
              <igc-expansion-panel>
                <h1 slot="title">Will I be automatically charged for my renewal/ Can I be automatically charged for renewal?</h1>
                <span>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.</span>
              </igc-expansion-panel>
            </igc-accordion>
          </igc-expansion-panel>
          <igc-expansion-panel>
            <h1 slot="title">I split my work across two computers. Can I install on both using my single-user license?</h1>
            <span>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.</span>
          </igc-expansion-panel>
          <igc-expansion-panel>
            <h1 slot="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?</h1>
            <span>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 <a
                    href="https://www.infragistics.com/products/ultimate">website</a> (This will also allow you
                    to start a new trial.)</li>
              </ul>
            </span>
          </igc-expansion-panel>
        </igc-accordion>
      </div>
    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

igc-accordion {
    width: 100%;
}

.sample-wrapper {
    overflow-y: auto;
    max-height: 470px;
    margin: 8px;
}

igc-switch {
    padding: 16px;
}

igc-expansion-panel {
    border: 1px solid rgba(174, 174, 174, 0.25);
}
css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

La navegación por teclado en el acordeón Web Components proporciona una amplia variedad de interacciones de teclado para el usuario final. Esta funcionalidad está habilitada de forma predeterminada y permite a los usuarios finales navegar fácilmente por los paneles.

La navegación en acordeón cumple con los estándares de accesibilidad W3C y es fácil de usar.

Combinaciones de teclas

↓: mueve el foco al panel de abajo
↑- mueve el foco al panel de arriba
Alt + ↓: abre el panel enfocado en el acordeón
Alt + ↑: cierra el panel enfocado en el acordeón
Shift + Alt + ↓: abre todos los paneles habilitados (si singleExpand está configurado en verdadero, abre el panel enfocado)
Shift + Alt + ↑- cierra todos los paneles habilitados
Inicio: navega al PRIMER panel habilitado en el acordeón
Fin: navega al ÚLTIMO panel habilitado en el acordeón