@ng-zi/extensions-accordion

MtxAccordion Component Overview

The mtx-accordion component is a versatile and customizable accordion component built on Angular Material. It provides a rich set of features, including support for nested accordions, custom templates, lazy loading, animations, event bindings, custom icons, and expand/collapse all functionality. It is designed to be flexible and powerful, making it a great choice for a wide range of use cases.

Feature	Description
Multiple Panels	Supports multiple collapsible panels that can be expanded or collapsed independently or simultaneously.
Customizable Templates	Allows customization of panel headers, content, and footers using Angular templates.
Accessibility	Ensures accessibility with appropriate ARIA roles and attributes for screen readers.
Animation	Provides smooth transitions for panel expand/collapse actions with optional animations.
Control Value Accessor	Integrates seamlessly with Angular forms using Control Value Accessor to manage panel states programmatically.
Custom Icons	Allows customization of icons for indicating expand/collapse state.
Styling	Supports custom CSS classes for flexible styling. CSS classes are prefixed with mtx- for easy integration and styling consistency.

Usage

Installation

1. Import the MtxAccordionModule into your Angular module:

   import { MtxAccordionModule } from '@ng-zi/extensions/accordion';
   
   @NgModule({
     declarations: [
       // your components
     ],
     imports: [
       // other modules
       MtxAutocompleteModule
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }

Basic Example

<mtx-accordion [accordionConfig]="accordionConfig"></mtx-accordion>

import { Component } from '@angular/core';

@Component({
  selector: 'app-accordion-demo',
  templateUrl: './accordion-demo.component.html'
})
export class AccordionDemoComponent {
  basicAccordionConfig = {
    panels: [
      { header: 'Panel 1', content: 'Content 1' },
      { header: 'Panel 2', content: 'Content 2' },
      { header: 'Panel 3', content: 'Content 3' },
    ],
    multi: true,
    animationsEnabled: true,
  };
}

Configuration

The MtxAccordion Component accepts a configuration object (MtxAccordionConfig) with the following properties:

Property	Type	Description
panels	MtxAccordionPanel[]	An array of objects defining each panel's header, content, and optional footer.
multi	boolean	Indicates whether multiple panels can be expanded simultaneously.
customClass	string | string[]	Optional CSS class or array of classes to apply to the accordion component.
defaultExpanded	boolean	Indicates whether panels should be expanded by default.
animationsEnabled	boolean	Enables or disables animations for panel transitions.
hideToggle	boolean	Hides the toggle icon for expanding/collapsing panels.
expandAllOnInit	boolean	Expands all panels on component initialization.
closeOthersOnOpen	boolean	Closes other open panels when opening a new one.
disableRipple	boolean	Disables the ripple effect on panel headers.

Events

The MtxAccordion Componentemits the following events:

Event Name	Payload	Description
panelOpened	number	Emitted when a panel is expanded.
panelClosed	number	Emitted when a panel is collapsed.

Accessibility

Ensures accessibility by using appropriate ARIA roles and attributes to support navigation and interaction via screen readers.

Styling

Customize the appearance of MtxAccordion Component using CSS classes and styles. CSS classes are prefixed with mtx- for easy integration and styling consistency.

---

This structured overview.md provides a comprehensive overview of your MtxAccordion Component, highlighting its features, usage examples, configuration options, events, accessibility considerations, and styling guidelines in a clear and organized table format. Adjust the content and examples based on your specific implementation and design requirements.

Summary

The mtx-accordion component is a powerful and flexible solution for creating accordion interfaces in your Angular applications. With support for custom templates, lazy loading, animations, and more, it provides all the features you need to build a robust and user-friendly accordion component.