Accordion Component Guide

@ngx-adv/accordion is an Angular library that provides accordion functionality for your Angular applications. It includes three main components: AccordionComponent, AccordionTabComponent, and AccordionTabHeaderComponent.

Table of Contents

• Features
• Installation
• Usage
• Contributions

Features

• Accordion Component

  • Toggle multiple tabs open or closed.
  • Highlight the active tab.
  • Customizable animations.

• Accordion Tab Component

  • Enable or disable individual tabs.
  • Hide the toggle icon for specific tabs.
  • Events for tab open and close actions.

• Accordion Tab Header Component

  • Render the header for accordion tabs.
  • Easily customize the header content.

Installation

1. Install the @ngx-adv/accordion package using npm:

npm install --save @ngx-adv/accordion

2. Import the Accordion component styles into your Angular application's stylesheet:

@import '@ngx-adv/theme/assets/scss/components/accordion';

Usage

3. In your component TypeScript file, import the necessary classes:

import {
  AccordionComponent,
  AccordionTabComponent,
  AccordionTabHeaderComponent,
} from '@ngx-adv/accordion';

@Component({
  selector: 'app-accordion-page',
  imports: [AccordionComponent, AccordionTabComponent, AccordionTabHeaderComponent
})
export class BadgePageComponent {
}

4. In your component's HTML template, use the ngx-adv-accordion Selector:

<ngx-adv-accordion #accordion class="d-block mb-3" [highlightActiveTab]="true">
  <ngx-adv-accordion-tab disabled="true">
    <ngx-adv-accordion-tab-header> Profile </ngx-adv-accordion-tab-header>
    <span class="d-block px-3 py-2">Label 1</span>
  </ngx-adv-accordion-tab>
</ngx-adv-accordion>

Contributions

Contributions for the @ngx-adv/accordion package are made by Mohamed Elserety. If you have any specific questions or need further assistance with this package, please reach out to your team for support.