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.