diff --git a/docs/angular/src/content/en/components/accordion.mdx b/docs/angular/src/content/en/components/accordion.mdx deleted file mode 100644 index e47cdfb254..0000000000 --- a/docs/angular/src/content/en/components/accordion.mdx +++ /dev/null @@ -1,318 +0,0 @@ ---- -title: Angular Accordion Component – Fully-featured collapsible panels - Infragistics - MIT license -description: Angular Accordion is used to build vertical expandable panels in accordion menu. Check how to do it with Ignite UI for Angular accordion component. -keywords: angular accordion, angular accordion component, angular accordion example, ignite ui for angular, angular UI components, infragistics -license: MIT -llms: - description: "The Angular Accordion is a GUI component for building vertical expandable panels with clickable headers and associated content sections, displayed in a single container." ---- - -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - -# Angular Accordion Component Overview - -## What is Angular Accordion? - -The Angular Accordion is a GUI component for building vertical expandable panels with clickable headers and associated content sections, displayed in a single container. The accordion is commonly used to reduce the need of scrolling across multiple sections of content on a single page. It offers keyboard navigation and API to control the underlying panels' expansion state. - -Users are enabled to interact and navigate among a list of items, such as thumbnails or labels. Each one of those items can be toggled (expanded or collapsed) in order to reveal the containing information. Depending on the configuration, there can be a single or multiple expanded items at a time. - -## Angular Accordion Example - -The following is a basic Angular Accordion example of a FAQ section. It operates as an accordion, with individually working sections. You can toggle each text block with a single click, while expanding multiple panels at the same time. This way you can read information more easily, without having to go back and forth between an automatically expanding and collapsing panel, which conceals the previously opened section every time. - -In it, you can see how to define an `igx-accordion` and its . The sample also demonstrates the two types of expansion behavior. The switch button sets the property to toggle between single and multiple branches to be expanded at a time. - - - -
- -## Getting Started with Ignite UI for Angular Accordion - -To get started with the Ignite UI for Angular Accordion component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command: - -```cmd -ng add igniteui-angular -``` - -For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic. - -The next step is to import the `IgxAccordionModule` in your **app.module.ts** file. - -```typescript -// app.module.ts - -... -import { IgxAccordionModule } from 'igniteui-angular/accordion'; -// import { IgxAccordionModule } from '@infragistics/igniteui-angular'; for licensed package - -@NgModule({ - ... - imports: [..., IgxAccordionModule], - ... -}) -export class AppModule {} -``` - -Alternatively, as of `16.0.0` you can import the `IgxAccordionComponent` as a standalone dependency, or use the [`IGX_ACCORDION_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/accordion/src/accordion/public_api.ts) token to import the component and all of its supporting components and directives. - -```typescript -// home.component.ts - -... -import { IGX_ACCORDION_DIRECTIVES } from 'igniteui-angular/accordion'; -// import { IGX_ACCORDION_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package - -@Component({ - selector: 'app-home', - template: ` - - - - Title Panel 1 - - - Content Panel 1 - - - - `, - styleUrls: ['home.component.scss'], - standalone: true, - imports: [IGX_ACCORDION_DIRECTIVES] - /* or imports: [IgxAccordionComponent] */ -}) -export class HomeComponent {} -``` - -Now that you have the Ignite UI for Angular Accordion module or directives imported, you can start with a basic configuration of the `igx-accordion` and its panels. - -## Using the Angular Accordion Component - -Each section in the is defined using an . -Panels provide , and properties, which give you the ability to configure the states of the panel as per your requirement. - -### Declaring an accordion - -The accordion wraps all declared inside it. - -```html - - - - Title Panel 1 - - - Content Panel 1 - - - - - Title Panel 2 - - - Content Panel 2 - - - -``` - -Using the accessor you can get a reference to the collection containing all children of the `igx-accordion`. - -```typescript -@ViewChild('accordion', { static: true }) -public accordion!: IgxAccordionComponent; - -this.accordion.panels; -``` - -As demonstrated above, the property gives you the ability to set whether single or multiple panels can be expanded at a time. - -### Angular Accordion Animations - -Angular Accordion supports animations for both expanding and collapsing actions of the panels. Animation behavior can be customized. Normally, animations can be set for each expansion panel individually. However, it could also be applied to all panels at once on level. This gives users the ability to disable animations for all sections at once via the animations property of the . - -With regards to animation, you have two options. First, you could set the property on the accordion component: - -```typescript -import { useAnimation, slideInLeft, slideOutRight } from '@angular/animations'; -// import { useAnimation, slideInLeft, slideOutRight } from '@infragistics/igniteui-angular/animations'; for licensed package - -@Component({ - ... -}) -export class AccordionComponent { - public animationSettingsCustom = { - closeAnimation: useAnimation(slideOutRight, { - params: { - duration: '100ms', - toPosition: 'translateX(25px)' - } - }), - openAnimation: useAnimation(slideInLeft, { - params: { - duration: '500ms', - fromPosition: 'translateX(-15px)', - startOpacity: 0.1 - } - }) - }; -} -``` - -As you can see, we are using and animations from our to make the component content appear from the left side and disappear to the right when collapsing the content. We further customize the animations by overriding some of the animations' parameters. - -The following snippet demonstrates passing the animation settings to the component: - -```html - - ... - -``` - - -If you would like to turn off the animation for the the could be set to `null`. - - -Alternatively, you have the ability to set every single `s input. - -```html - - - - Title Panel 1 - - - Content Panel 1 - - - - - Title Panel 2 - - - Content Panel 2 - - - -``` - -Using the and methods you can respectively collapse and expand all of the programmatically. - - -If property is set to _true_ calling method would expand only the last . - - -### Angular Accordion Templating Example - -With the Angular , you can customize the header and content panel`s appearance. -The sample below demonstrates how elaborate filtering options can be implemented using the built-in templating functionality of the . - - - -
- -### Nested Angular Accordions Scenario - -In the following Angular accordion example, we are going to create a complex FAQ section in order to illustrate how you can go about this common application scenario. In the sample nested is achieved by adding an inside the body of an . - -```html - - - - Title Panel 1 - - - - - - Title Nested Panel 1 - - - Content Nested Panel 1 - - - ... - - - - ... - -``` - -You can see the result below. - - - -
- -## Keyboard Navigation - -Keyboard navigation in the Ignite UI for Angular Accordion provides a rich variety of keyboard interactions to the end-user. This functionality is enabled by default and allows end-users to easily navigate through the panels. -The navigation is compliant with W3C accessibility standards and convenient to use. - -**Key Combinations** - -- Tab - moves the focus to the first(if the focus is before accordion)/next panel -- Shift + Tab - moves the focus to the last(if the focus is after accordion)/previous panel -- Arrow Down - moves the focus to the panel below -- Arrow Up - moves the focus to the panel above -- Alt + Arrow Down - expands the focused panel in the accordion -- Alt + Arrow Up - collapses the focused panel in the accordion -- Shift + Alt + Arrow Down - expands all enabled panels(if singleBranchExpand is set to true expands the last enabled panel) -- Shift + Alt + Arrow Up - collapses all enabled panels -- Home - navigates to the FIRST enabled panel in the accordion -- End - navigates to the LAST enabled panel in the accordion - -## Styling - -The serves only as a container for the underlying . Styles can be applied directly through the panel's theme, as described in the [`styling section of the IgxExpansionPanel topic`](/expansion-panel#styling). - -By design, there is a margin set to the expanded panels, in case that they are positioned within an `igx-accordion`. In order to modify it there is a property exposed inside the igx-expansion-panel theme. -In order to take advantage of the functions exposed by the theming engine, we have to import the `index` file in our style file: - -```scss -@use "igniteui-angular/theming" as *; - -// IMPORTANT: Prior to Ignite UI for Angular version 13 use: -// @import '~igniteui-angular/lib/core/styles/themes/index'; -``` - -Following the simplest approach, we create a new theme that extends the and accepts a `$header-background`, `$body-color` and `$expanded-margin` parameters. The theme automatically assigns foreground colors, either black or white, based on which provides better contrast with the specified backgrounds. - -```scss -$custom-panel-theme: expansion-panel-theme( - $header-background: #011627, - $body-background: #f0ece7, - $expanded-margin: 10px -); -``` - -The last step is to include the component's theme. - -```scss -:host { - @include tokens($custom-panel-theme); -} -``` - -### Demo - - - -## API Reference - -- -- -- -- -- - -## Additional Resources - -Our community is active and always welcoming new ideas. - -- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/en/components/expansion-panel.mdx b/docs/angular/src/content/en/components/expansion-panel.mdx index 87c61acac8..9b2362503a 100644 --- a/docs/angular/src/content/en/components/expansion-panel.mdx +++ b/docs/angular/src/content/en/components/expansion-panel.mdx @@ -417,7 +417,7 @@ You can see the results below: ## Multiple panel scenario -See the [igxAccordion topic](/accordion) +See the [igxAccordion topic](../../../../../xplat/src/content/en/components/layouts/accordion.mdx) ## API Reference diff --git a/docs/angular/src/content/en/components/general/cli/component-templates.mdx b/docs/angular/src/content/en/components/general/cli/component-templates.mdx index 1b4d9466c2..679398666e 100644 --- a/docs/angular/src/content/en/components/general/cli/component-templates.mdx +++ b/docs/angular/src/content/en/components/general/cli/component-templates.mdx @@ -44,7 +44,7 @@ These templates generate components into an existing Angular workspace only. The | carousel | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c carousel newCarousel
Ignite UI CLI:
ig add carousel newCarousel
Basic IgxCarousel.
| [IgxCarousel](../../carousel.mdx) cycling through a series of images. | | tabs | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c tabs newTabs
Ignite UI CLI:
ig add tabs newTabs
Basic IgxTabs.
| [IgxTabs](../../tabs.mdx) component that includes three customized tab-groups. | | bottom-nav | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c bottom-nav newBottomNav
Ignite UI CLI:
ig add bottom-nav newBottomNav
Three item bottom-nav template.
| Three item bottom [navbar](../../navbar.mdx) template. | -| accordion | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c accordion newAccordion
Ignite UI CLI:
ig add accordion newAccordion
Basic IgxAccordion sample.
| [IgxAccordion](../../accordion.mdx) with multiple collapsible panels in a single container. | +| accordion | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c accordion newAccordion
Ignite UI CLI:
ig add accordion newAccordion
Basic IgxAccordion sample.
| [IgxAccordion](../../../../../../../xplat/src/content/en/components/layouts/accordion.mdx) with multiple collapsible panels in a single container. | | stepper | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c stepper newStepper
Ignite UI CLI:
ig add stepper newStepper
Basic IgxStepper sample.
| [IgxStepper](../../stepper.mdx) visualizing content as a process with successive steps. | | Data Entry & Display | | | | chip | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c chip newChip
Ignite UI CLI:
ig add chip newChip
Basic IgxChip.
| [IgxChip](../../chip.mdx) components inside igx-chips-area. | diff --git a/docs/angular/src/content/en/components/layouts/accordion.mdx b/docs/angular/src/content/en/components/layouts/accordion.mdx new file mode 100644 index 0000000000..4ca7def108 --- /dev/null +++ b/docs/angular/src/content/en/components/layouts/accordion.mdx @@ -0,0 +1,305 @@ +--- +title: "Angular Accordion Component | Layouts | Infragistics" +description: "Angular Accordion is a layout component for organizing expandable and collapsible content panels in a vertical container." +keywords: "Angular Accordion, accordion component, expandable panels, Ignite UI for Angular, Infragistics" +license: MIT +mentionedTypes: ["Accordion", "ExpansionPanel"] +namespace: Infragistics.Controls +relatedComponents: ["ExpansionPanel"] +llms: + description: "The Ignite UI for Angular Accordion helps developers group related content into expandable and collapsible panels inside a vertical layout." +--- +import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; +import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; +import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; +import { Image } from 'astro:assets'; +import accordionAnatomy from '@xplat-images/anatomy-frame-light/Accordion-lt.png'; +import accordionDo from '@xplat-images/accordion/accordion_do1.png'; +import accordionDoNot from '@xplat-images/accordion/accordion_do_not1.png'; + +# Accordion Component + +The Ignite UI for Angular Accordion is a layout component for organizing expandable content panels in a single vertical container. + +## Live Demo + + + +## Anatomy + +The accordion structure consists of an accordion container with one or more expansion panel children. + +Angular Accordion anatomy + +```text +igx-accordion // host - manages a set of expansion panels +└─ igx-expansion-panel // child panel + ├─ igx-expansion-panel-header // panel header container + │ ├─ igx-expansion-panel-title // panel header title + │ ├─ igx-expansion-panel-description // optional header description + │ └─ igx-expansion-panel-icon // optional custom expand/collapse icon + └─ igx-expansion-panel-body // expandable panel content +``` + +## Getting Started + +Import the standalone accordion directives before you use the component. If you have not set up Ignite UI for Angular yet, complete the shared [Getting Started](../general/getting-started.mdx) topic first. + +```ts +import { Component } from '@angular/core'; +import { IGX_ACCORDION_DIRECTIVES } from 'igniteui-angular/accordion'; + +@Component({ + selector: 'app-accordion', + imports: [IGX_ACCORDION_DIRECTIVES], + templateUrl: './accordion.component.html', +}) +export class AccordionComponent {} +``` + +## Usage + +Build the accordion by placing one or more components inside an container. + +### Single Expansion + +Set to switch between one-open-panel behavior and multiple-open-panel behavior. + +```html + + + + Title Panel 1 + + +

Content Panel 1

+ + + + + Title Panel 2 + + +

Content Panel 2

+ + + +``` + +### Programmatic Expansion + +Use and to collapse or expand the accordion panels programmatically. + + +Calling expands only the last enabled panel when is `true`. + + +```html + + + + + + + Title Panel 1 + + +

Content Panel 1

+ + + + + Title Panel 2 + + +

Content Panel 2

+ + + +``` + + + +### Customize Panel Content + +Customize panel headers with title and description elements, and place expandable content inside the panel body. + +```html + + + + Billing + Payment and invoice settings + + +

Update payment methods, billing contacts, and invoice delivery options.

+ + + +``` + + + +### Nest Accordions + +Nest an accordion inside an expansion panel body when you need a second level of grouped disclosure. + +```html + + + + Account Settings + + + + + + Notifications + + +

Configure email and product notification preferences.

+ + + + + + +``` + + + +### Do/Don't + +**When to use:** Use the accordion when you need to organize secondary content, FAQ entries, settings groups, or other related vertical sections that users expand on demand. Keep panel titles short and descriptive, and enable single-expansion behavior when users should focus on one section at a time. + +**When not to use:** Use the [Expansion Panel](../expansion-panel.mdx) when you need a single standalone expandable section instead of a coordinated container that manages multiple panels together. Do not use an accordion to hide essential primary content or to group unrelated sections. + +
+ + + + + + + + + + + + + +
DoDon't
Angular Accordion do guidanceAngular Accordion don't guidance
+
+ +## Properties + +The accordion exposes container-level controls; panel-specific state is configured on each . + +| Name | Type | Default | Description | +| -- | -- | -- | -- | +| | `boolean` | `false` | Controls whether one or multiple panels can stay expanded at the same time. | +| | `QueryList` | n/a | Returns the collection of child expansion panels in the accordion. | + +## Methods + +Use the accordion methods when you need to change panel state from your code. + +| Name | Description | +| -- | -- | +| | Expands the available panels. | +| | Collapses the available panels. | + +## Styling + +Style the accordion by customizing the appearance of its child components. + + + +### Sass Theming + +Use the function to create a custom expansion panel theme, then include the generated tokens in the component stylesheet. + +```scss +@use "igniteui-angular/theming" as *; + +$custom-panel-theme: expansion-panel-theme( + $header-background: #011627, + $body-background: #f0ece7, + $expanded-margin: 10px +); + +:host { + @include tokens($custom-panel-theme); +} +``` + +### Styling Variables + +| Variable | What it changes | +| -- | -- | +| `$header-background` | The panel header background color. | +| `$header-focus-background` | The panel header background color when focused. | +| `$header-title-color` | The panel header title text color. | +| `$header-description-color` | The panel header description text color. | +| `$header-icon-color` | The panel header icon color. | +| `$body-background` | The panel body background color. | +| `$body-color` | The panel body text color. | +| `$expanded-margin` | The margin applied to expanded panels when they are placed inside an accordion. | +| `$border-radius` | The expansion panel border radius. | + +## Accessibility + +The accordion supports keyboard interaction for moving focus between panels and changing their expanded state. + +### Keyboard Interaction + +Use the keyboard shortcuts below to move through the accordion and open or close panels. + +| Key | Action | +| -- | -- | +| Down Arrow | Moves focus to the panel below. | +| Up Arrow | Moves focus to the panel above. | +| Alt + Down Arrow | Opens the focused panel. | +| Alt + Up Arrow | Closes the focused panel. | +| Shift + Alt + Down Arrow | Opens all enabled panels. If is `true`, opens the last enabled panel. | +| Shift + Alt + Up Arrow | Closes all enabled panels. | +| Home | Moves focus to the first enabled panel. | +| End | Moves focus to the last enabled panel. | + +### Screen Readers / ARIA + +The accordion's accessibility semantics are provided through its child expansion panels and their headers. + +- Each panel header exposes `role="button"`, `aria-expanded`, and `aria-controls`. +- Each panel body exposes `role="region"` and a label through `aria-labelledby` or `aria-label`. +- Use clear title text for each panel so assistive technologies can announce a meaningful label. +- Keep interactive content inside panel bodies in a logical tab order. + +### Accessibility Compliance + +Infragistics documents Ignite UI for Angular accessibility support for Section 508 and WCAG 2.1 guideline areas in the [Accessibility Compliance](../interactivity/accessibility-compliance.mdx) topic. The accordion's compliance evidence comes from the child components that provide the interactive headers and regions. + +| Criterion | How the component complies | +| -- | -- | +| [2.1.1 Keyboard](https://www.w3.org/WAI/WCAG22/Understanding/keyboard) | The accordion supports keyboard commands for moving focus and opening or closing panels. | +| [2.4.3 Focus Order](https://www.w3.org/WAI/WCAG22/Understanding/focus-order) | Focus moves through enabled panels in sequence, with shortcuts for jumping to the first and last panel. | + +Your responsibilities: + +- Provide panel titles that describe the content behind each disclosure area. +- Preserve a logical focus order in the surrounding page layout. +- Validate any custom styling against your application's contrast and focus-indicator requirements. + +## API References + + + + +## Dependencies + +The accordion depends on for its visible sections. + +## Additional Resources + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/en/images/accordion/accordion_do1.png b/docs/angular/src/content/en/images/accordion/accordion_do1.png new file mode 100644 index 0000000000..148543500f Binary files /dev/null and b/docs/angular/src/content/en/images/accordion/accordion_do1.png differ diff --git a/docs/angular/src/content/en/images/accordion/accordion_do_not1.png b/docs/angular/src/content/en/images/accordion/accordion_do_not1.png new file mode 100644 index 0000000000..2cd85c19bc Binary files /dev/null and b/docs/angular/src/content/en/images/accordion/accordion_do_not1.png differ diff --git a/docs/xplat/src/assets/images/anatomy-frame-light/Accordeon-lt.png b/docs/angular/src/content/en/images/anatomy-frame-light/Accordion-lt.png similarity index 100% rename from docs/xplat/src/assets/images/anatomy-frame-light/Accordeon-lt.png rename to docs/angular/src/content/en/images/anatomy-frame-light/Accordion-lt.png diff --git a/docs/xplat/src/assets/images/accordion/accordion_do1.png b/docs/xplat/src/assets/images/accordion/accordion_do1.png new file mode 100644 index 0000000000..148543500f Binary files /dev/null and b/docs/xplat/src/assets/images/accordion/accordion_do1.png differ diff --git a/docs/xplat/src/assets/images/accordion/accordion_do_not1.png b/docs/xplat/src/assets/images/accordion/accordion_do_not1.png new file mode 100644 index 0000000000..2cd85c19bc Binary files /dev/null and b/docs/xplat/src/assets/images/accordion/accordion_do_not1.png differ diff --git a/docs/xplat/src/assets/images/anatomy-frame-light/Accordion-lt.png b/docs/xplat/src/assets/images/anatomy-frame-light/Accordion-lt.png new file mode 100644 index 0000000000..d13af44d2a Binary files /dev/null and b/docs/xplat/src/assets/images/anatomy-frame-light/Accordion-lt.png differ diff --git a/docs/xplat/src/content/en/components/layouts/accordion.mdx b/docs/xplat/src/content/en/components/layouts/accordion.mdx index 48428e420d..7c3b7eee41 100644 --- a/docs/xplat/src/content/en/components/layouts/accordion.mdx +++ b/docs/xplat/src/content/en/components/layouts/accordion.mdx @@ -1,92 +1,129 @@ --- -title: "{Platform} Accordion | Accordion | Infragistics" -description: Accordion is used to build vertical expandable panels in accordion menu. -keywords: "{Platform} Accordion, {ProductName}, Infragistics" +title: "{Platform} Accordion Component | Layouts | Infragistics" +description: "{Platform} Accordion is a layout component for organizing expandable and collapsible content panels in a vertical container." +keywords: "{Platform} Accordion, accordion component, expandable panels, {ProductName}, Infragistics" license: MIT -mentionedTypes: ["Accordion", "Infragistics.Controls.Layouts.Implementation.ExpansionPanel"] +mentionedTypes: ["Accordion", "ExpansionPanel"] namespace: Infragistics.Controls +relatedComponents: ["ExpansionPanel"] llms: - description: "The {ProductName} Accordion is a GUI component for building vertical expandable panels with clickable headers and associated content sections, displayed in a single container." + description: "The {ProductName} Accordion helps developers group related content into expandable and collapsible panels inside a vertical layout." --- import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; +import { Image } from 'astro:assets'; +import accordionAnatomy from '@xplat-images/anatomy-frame-light/Accordion-lt.png'; +import accordionDo from '@xplat-images/accordion/accordion_do1.png'; +import accordionDoNot from '@xplat-images/accordion/accordion_do_not1.png'; +# Accordion Component +The {ProductName} Accordion is a layout component for organizing expandable content panels in a single vertical container. -# {Platform} Accordion Overview +## Live Demo -The {ProductName} Accordion is a GUI component for building vertical expandable panels with clickable headers and associated content sections, displayed in a single container. The accordion is commonly used to reduce the need of scrolling across multiple sections of content on a single page. It offers keyboard navigation and API to control the underlying panels' expansion state. + -Users are enabled to interact and navigate among a list of items, such as thumbnails or labels. Each one of those items can be toggled (expanded or collapsed) in order to reveal the containing information. Depending on the configuration, there can be a single or multiple expanded items at a time. + -## {Platform} Accordion Example + -The following is a basic {ProductName} Accordion example of a FAQ section. It operates as an accordion, with individually working sections. You can toggle each text block with a single click, while expanding multiple panels at the same time. This way you can read information more easily, without having to go back and forth between an automatically expanding and collapsing panel, which conceals the previously opened section every time. + -In it, you can see how to define an accordion and its expansion panels. The sample also demonstrates the two types of expansion behavior. The switch button sets the property to toggle between single and multiple branches to be expanded at a time. + - + -## Getting Started with {Platform} Accordion +## Anatomy - +The accordion structure consists of an accordion container with one or more expansion panel children. -First, you need to install the {ProductName} by running the following command: +{Platform} Accordion anatomy -```cmd -npm install {PackageWebComponents} + + +```text +igc-accordion // host - manages a set of expansion panels +└─ igc-expansion-panel // child panel + ├─ [slot="title"] // panel header title + ├─ [slot="subtitle"] // optional header subtitle + ├─ [slot="indicator"] // custom collapsed/default indicator + ├─ [slot="indicator-expanded"] // optional custom expanded-state indicator + └─ default slot // expandable panel content ``` -Before using the , you need to register it as follows: + -```ts -import { defineComponents, IgcAccordionComponent } from 'igniteui-webcomponents'; + -defineComponents(IgcAccordionComponent); +```text +igx-accordion // host - manages a set of expansion panels +└─ igx-expansion-panel // child panel + ├─ igx-expansion-panel-header // panel header container + │ ├─ igx-expansion-panel-title // panel header title + │ ├─ igx-expansion-panel-description // optional header description + │ └─ igx-expansion-panel-icon // optional custom expand/collapse icon + └─ igx-expansion-panel-body // expandable panel content ``` -For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic. - - +## Getting Started + + -First, you need to the install the corresponding {ProductName} npm package by running the following command: +Import the standalone accordion directives before you use the component. If you have not set up {ProductName} yet, complete the shared [Getting Started](../general/getting-started.mdx) topic first. -```cmd -npm install igniteui-react +```ts +import { Component } from '@angular/core'; +import { IGX_ACCORDION_DIRECTIVES } from 'igniteui-angular/accordion'; + +@Component({ + selector: 'app-accordion', + imports: [IGX_ACCORDION_DIRECTIVES], + templateUrl: './accordion.component.html', +}) +export class AccordionComponent {} ``` -You will then need to import the and the and its necessary CSS, like so: + -```tsx + + +Register the accordion and expansion panel components before you use them. If you have not set up {ProductName} yet, complete the shared [Getting Started](../general-getting-started.mdx) topic first. + +```ts import { - IgrAccordion, - IgrExpansionPanel, -} from "igniteui-react"; -import "igniteui-webcomponents/themes/light/bootstrap.css"; + defineComponents, + IgcAccordionComponent, + IgcExpansionPanelComponent, +} from 'igniteui-webcomponents'; +defineComponents(IgcAccordionComponent, IgcExpansionPanelComponent); ``` -Before using the , you need to register it as follows: - - + -```csharp -// in Program.cs file +Import the React wrappers and the theme stylesheet before you render the accordion. If you have not set up {ProductName} yet, complete the shared [Getting Started](../general-getting-started.mdx) topic first. -builder.Services.AddIgniteUIBlazor(typeof(IgbAccordionModule)); +```tsx +import { IgrAccordion, IgrExpansionPanel } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; ``` -You will also need to link an additional CSS file to apply the styling to the component. The following needs to be placed in the **wwwroot/index.html** file in a **Blazor Web Assembly** project or the **Pages/_Host.cshtml** file in a **Blazor Server** project: +Register the accordion module in `Program.cs` and add the theme stylesheet to your host page. If you have not set up {ProductName} yet, complete the shared [Getting Started](../general-getting-started.mdx) topic first. + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbAccordionModule)); +``` ```razor @@ -94,47 +131,62 @@ You will also need to link an additional CSS file to apply the styling to the -Now you can start with a basic configuration of the and its panels. - ## Usage -Each section in the {Platform} Accordion Component is defined using an {Platform} Expansion Panel. -Panels provide and properties, which give you the ability to configure the states of the panel as per your requirement. +Build the accordion by placing one or more components inside an container. -### Declaring an Accordion +### Single Expansion -The accordion wraps all expansion panels declared inside it. + - +Set to switch between one-open-panel behavior and multiple-open-panel behavior. + + + + + +Set to switch between one-open-panel behavior and multiple-open-panel behavior. + + + + ```html - - - Title Panel 1 -

Content Panel 1

- - - Title Panel 2 -

Content Panel 2

- - + + + + Title Panel 1 + + +

Content Panel 1

+ + + + + Title Panel 2 + + +

Content Panel 2

+ + + ``` - + -```razor - - - Title Panel 1 -

Content Panel 1

- - - Title Panel 2 -

Content Panel 2

- - +```html + + + Title Panel 1 +

Content Panel 1

+ + + Title Panel 2 +

Content Panel 2

+ + ``` @@ -156,66 +208,509 @@ The accordion wraps all expansion panels declared inside it. + + +```razor + + + Title Panel 1 +

Content Panel 1

+ + + Title Panel 2 +

Content Panel 2

+ + +``` + + + +### Programmatic Expansion + + + +Use and to collapse or expand the accordion panels programmatically. + + +Calling expands only the last enabled panel when is `true`. + + + + + + +Use and to collapse or expand all available panels programmatically. + + +Calling expands all panels, even when is `true`. + + + + + + +```html + + + + + + + Title Panel 1 + + +

Content Panel 1

+ + + + + Title Panel 2 + + +

Content Panel 2

+ + + +``` + + + -Using the accessor you can get a reference to the collection containing all expansion panels children of the . +```html + + + + + + Title Panel 1 +

Content Panel 1

+ + + Title Panel 2 +

Content Panel 2

+ + +``` + +```ts +const accordion = document.getElementById('accordion') as IgcAccordionComponent; + +document.getElementById('show-all').addEventListener('click', () => accordion.showAll()); +document.getElementById('hide-all').addEventListener('click', () => accordion.hideAll()); +``` + + + + + +```tsx +const accordionRef = useRef(null); + +return ( + <> + accordionRef.current?.showAll()}>Show All + accordionRef.current?.hideAll()}>Hide All + + + + Title Panel 1 +

Content Panel 1

+ + + Title Panel 2 +

Content Panel 2

+ + + +); +``` + + + + + +```razor +Show All +Hide All + + + + Title Panel 1 +

Content Panel 1

+ + + Title Panel 2 +

Content Panel 2

+ + + +@code { + private IgbAccordion accordion; -```typescript -private accordion: IgcAccordionComponent; -private panels: IgcExpansionPanelComponent[]; + private async Task ShowAll() => await accordion.ShowAllAsync(); -constructor() { - this.accordion = document.getElementById("accordion") as IgcAccordionComponent; - this.panels = this.accordion.panels; + private async Task HideAll() => await accordion.HideAllAsync(); } ``` -As demonstrated above, the property gives you the ability to set whether single or multiple panels can be expanded at a time. + -By using the and methods you can respectively collapse and expand all s of the programmatically. + - -If property is set to **true** calling method would expand only the focused panel. - + + + + + + + + +### Customize Panel Content + + + +Customize panel headers with title and description elements, and place expandable content inside the panel body. + +```html + + + + Billing + Payment and invoice settings + + +

Update payment methods, billing contacts, and invoice delivery options.

+ + + +``` + + + + + +Customize the panel headers and content through the underlying slots. + + + + + + + + + + + + + + + +### Nest Accordions + + + +Nest an accordion inside an expansion panel body when you need a second level of grouped disclosure. + +```html + + + + Account Settings + + + + + + Notifications + + +

Configure email and product notification preferences.

+ + + + + + +``` + + + + + +Nest an accordion inside an expansion panel when you need a second level of grouped disclosure. + + + + + + + + + + + + + + + +### Do/Don't + +**When to use:** Use the accordion when you need to organize secondary content, FAQ entries, settings groups, or other related vertical sections that users expand on demand. Keep panel titles short and descriptive, and enable single-expansion behavior when users should focus on one section at a time. + + + +**When not to use:** Use the [Expansion Panel](../expansion-panel.mdx) when you need a single standalone expandable section instead of a coordinated container that manages multiple panels together. Do not use an accordion to hide essential primary content or to group unrelated sections. + + + + + +**When not to use:** Use the [Expansion Panel](./expansion-panel.mdx) when you need a single standalone expandable section instead of a coordinated container that manages multiple panels together. Do not use an accordion to hide essential primary content or to group unrelated sections. + + + +
+ + + + + + + + + + + + + +
DoDon't
{Platform} Accordion do guidance{Platform} Accordion don't guidance
+
+ +## Properties + + + +The accordion exposes container-level controls; panel-specific state is configured on each . + +| Name | Type | Default | Description | +| -- | -- | -- | -- | +| | `boolean` | `false` | Controls whether one or multiple panels can stay expanded at the same time. | +| | `QueryList` | n/a | Returns the collection of child expansion panels in the accordion. | + + + + + +The accordion exposes a small set of container-level controls; panel-specific state is configured on each . + +| Name | Type | Default | Description | +| -- | -- | -- | -- | +| | `boolean` | `false` | Controls whether one or multiple panels can stay expanded at the same time. | +| | | n/a | Returns the collection of child expansion panels in the accordion. | + + + +## Methods -### {Platform} Accordion Customization Example + -With the {Platform} Accordion, you can customize the header and content panel's appearance. +Use the accordion methods when you need to change panel state from your code. -The sample below demonstrates how elaborate filtering options can be implemented using the built-in slots of the . +| Name | Description | +| -- | -- | +| | Expands the available panels. | +| | Collapses the available panels. | - + + + + +Use the accordion methods when you need to change panel state from your code. + +| Name | Description | +| -- | -- | +| | Expands all available panels. | +| | Collapses the available panels. | + + + +## Styling + + + +Style the accordion by customizing the appearance of its child components. + + + +### Sass Theming + +Use the function to create a custom expansion panel theme, then include the generated tokens in the component stylesheet. + +```scss +@use "igniteui-angular/theming" as *; + +$custom-panel-theme: expansion-panel-theme( + $header-background: #011627, + $body-background: #f0ece7, + $expanded-margin: 10px +); + +:host { + @include tokens($custom-panel-theme); +} +``` + +### Styling Variables + +| Variable | What it changes | +| -- | -- | +| `$header-background` | The panel header background color. | +| `$header-focus-background` | The panel header background color when focused. | +| `$header-title-color` | The panel header title text color. | +| `$header-description-color` | The panel header description text color. | +| `$header-icon-color` | The panel header icon color. | +| `$body-background` | The panel body background color. | +| `$body-color` | The panel body text color. | +| `$expanded-margin` | The margin applied to expanded panels when they are placed inside an accordion. | +| `$border-radius` | The expansion panel border radius. | + + + + + +Style the accordion by targeting the parts exposed by its child components. + +### Styling Variables + +Use {ProductName} theme CSS variables as values when styling the expansion panel parts. + +| Variable | What it changes | +| -- | -- | +| `--ig-secondary-900` | Supplies the dark background color used by the panel and header in the example below. | +| `--ig-secondary-900-contrast` | Supplies a readable foreground color for content on `--ig-secondary-900`. | +| `--ig-warn-500` | Supplies the accent color used by the indicator, title, and subtitle in the example below. | + +```css +igc-expansion-panel { + background-color: var(--ig-secondary-900); + color: var(--ig-secondary-900-contrast); +} + +igc-expansion-panel::part(header) { + background-color: var(--ig-secondary-900); +} + +igc-expansion-panel::part(indicator), +igc-expansion-panel::part(title), +igc-expansion-panel::part(subtitle) { + color: var(--ig-warn-500); +} +``` + +### CSS Parts + +| Part | What it changes | +| -- | -- | +| `header` | The container for the expansion indicator, title, and subtitle. | +| `title` | The title container. | +| `subtitle` | The subtitle container. | +| `indicator` | The indicator container. | +| `content` | The expansion panel content wrapper. | + + + +## Accessibility + +The accordion supports keyboard interaction for moving focus between panels and changing their expanded state. + +### Keyboard Interaction + + + +Use the keyboard shortcuts below to move through the accordion and open or close panels. + +| Key | Action | +| -- | -- | +| Down Arrow | Moves focus to the panel below. | +| Up Arrow | Moves focus to the panel above. | +| Alt + Down Arrow | Opens the focused panel. | +| Alt + Up Arrow | Closes the focused panel. | +| Shift + Alt + Down Arrow | Opens all enabled panels. If is `true`, opens the last enabled panel. | +| Shift + Alt + Up Arrow | Closes all enabled panels. | +| Home | Moves focus to the first enabled panel. | +| End | Moves focus to the last enabled panel. | + + + + + +Use the keyboard shortcuts below to move through the accordion and open or close panels. + +| Key | Action | +| -- | -- | +| Down Arrow | Moves focus to the panel below. | +| Up Arrow | Moves focus to the panel above. | +| Alt + Down Arrow | Opens the focused panel. | +| Alt + Up Arrow | Closes the focused panel. | +| Shift + Alt + Down Arrow | Opens all enabled panels. If is `true`, opens only the focused panel. | +| Shift + Alt + Up Arrow | Closes all enabled panels. | +| Home | Moves focus to the first enabled panel. | +| End | Moves focus to the last enabled panel. | -### Nested {Platform} Accordions Scenario + + +### Screen Readers / ARIA + +The accordion's accessibility semantics are provided through its child expansion panels and their headers. + +- Each panel header exposes `role="button"`, `aria-expanded`, and `aria-controls`. +- Each panel body exposes `role="region"` and a label through `aria-labelledby` or `aria-label`. +- Use clear title text for each panel so assistive technologies can announce a meaningful label. +- Keep interactive content inside panel bodies in a logical tab order. -In the following {Platform} Accordion example is created a complex FAQ section in order to illustrate how you can go about this common application scenario. In the sample nested is achieved by adding an accordion inside an expansion panel. +### Accessibility Compliance - + -## Keyboard Navigation +Infragistics documents {ProductName} accessibility support for Section 508 and WCAG 2.1 guideline areas in the [Accessibility Compliance](../interactivity/accessibility-compliance.mdx) topic. The accordion's compliance evidence comes from the child components that provide the interactive headers and regions. -Keyboard navigation in the {Platform} Accordion provides a rich variety of keyboard interactions to the end-user. This functionality is enabled by default and allows end-users to easily navigate through the panels. + + + -The Accordion navigation is compliant with W3C accessibility standards and convenient to use. +Infragistics documents {ProductName} accessibility support for Section 508 and WCAG 2.1 guideline areas in the [Accessibility Compliance](../interactivity/accessibility-compliance.mdx) topic. The accordion's compliance evidence comes from the child components that provide the interactive headers and regions. + + -**Key Combinations** -- ↓ - moves the focus to the panel below -- ↑ - moves the focus to the panel above -- ALT + ↓ - opens the focused panel in the accordion -- ALT + ↑ - closes the focused panel in the accordion -- SHIFT + ALT + ↓ - opens all enabled panels (if singleExpand is set to true opens the focused panel) -- SHIFT + ALT + ↑ - closes all enabled panels -- HOME - navigates to the FIRST enabled panel in the accordion -- END - navigates to the LAST enabled panel in the accordion +| Criterion | How the component complies | +| -- | -- | +| [2.1.1 Keyboard](https://www.w3.org/WAI/WCAG22/Understanding/keyboard) | The accordion supports keyboard commands for moving focus and opening or closing panels. | +| [2.4.3 Focus Order](https://www.w3.org/WAI/WCAG22/Understanding/focus-order) | Focus moves through enabled panels in sequence, with shortcuts for jumping to the first and last panel. | - +Your responsibilities: +- Provide panel titles that describe the content behind each disclosure area. +- Preserve a logical focus order in the surrounding page layout. +- Validate any custom styling against your application's contrast and focus-indicator requirements. ## API References + + +## Dependencies + +The accordion depends on for its visible sections. + + + +The accordion also depends on the shared theme stylesheet for its default appearance. + + + ## Additional Resources - [{ProductName} **Forums**]({ForumsLink}) diff --git a/docs/xplat/src/content/en/toc.json b/docs/xplat/src/content/en/toc.json index 17c916bd26..cb40e242d2 100644 --- a/docs/xplat/src/content/en/toc.json +++ b/docs/xplat/src/content/en/toc.json @@ -2209,16 +2209,12 @@ ] }, { - "exclude": [ - "Angular" - ], + "exclude": [], "name": "Layouts", "header": true }, { - "exclude": [ - "Angular" - ], + "exclude": [], "name": "Accordion", "href": "layouts/accordion.mdx" },