0.3.2 • Published 6 months ago

@andreagrossetti/ngx-accordion v0.3.2

Weekly downloads
76
License
-
Repository
-
Last release
6 months ago

NgxAccordion

I've build this angular accordion because other accordions were outdated or could not expand accordion group's inner elements as well as accordion groups.

Demo

https://stackblitz.com/edit/ngx-accordion

Changes from version 0.1.x

  • ngx-accordion-element has been renamed to ngx-accordion-group-child.
  • Added ngx-accordion-group-header to be able to use anchor link as group title.
  • startActive option has been removed
  • added active option to be able to set accordion group and accordion group child active state.

Installation

yarn add @andreagrossetti/ngx-accordion

Setup

import { AccordionModule } from '@andreagrossetti/ngx-accordion';
import { BrowserModule } from '@angular/platform-browser';

@NgModule({
  imports: [
    CommonModule,
    BrowserModule,
    AccordionModule // ngx-accordion added
  ],
  bootstrap: [App],
  declarations: [App]
})
class MainModule {}

Use

Open demo for more examples

<ngx-accordion>
  <ngx-accordion-group>
    <ngx-accordion-group-element>
      <fa-icon [icon]="faAppleAlt"></fa-icon> Fruits
    </ngx-accordion-group-element>
    <ngx-accordion-group-child> Banana</ngx-accordion-group-child>
    <ngx-accordion-group-child> Orange</ngx-accordion-group-child>
  </ngx-accordion-group>
  <ngx-accordion-group [active]="true">
    <ngx-accordion-group-element>
      <fa-icon [icon]="faCarrot"></fa-icon> Vegetables
    </ngx-accordion-group-element>
    <ngx-accordion-group-child>Carrot</ngx-accordion-group-child>
  </ngx-accordion-group>
  <ngx-accordion-group>
    <ngx-accordion-group-element>
      <fa-icon [icon]="faCookie"></fa-icon> Cookies
    </ngx-accordion-group-element>
    <ngx-accordion-group-child>Butter cookie</ngx-accordion-group-child>
    <ngx-accordion-group-child>Macaron</ngx-accordion-group-child>
  </ngx-accordion-group>
  <ngx-accordion-group>
    <ngx-accordion-group-element>
      <fa-icon [icon]="faBook"></fa-icon> Books
    </ngx-accordion-group-element>
  </ngx-accordion-group>
</ngx-accordion>

Options

AccordionGroup options

OptionTypeDefaultDescription
activebooleanfalseInitial status of Accordion Group
showGroupExpandedSymbolbooleantrueShow + or - symbol if group is expanded.
handleStateManuallybooleanfalsehandle active state manually (needed for anchor links)

AccordionGroupChild options

OptionTypeDefaultDescription
activebooleanfalseInitial status of Accordion Element
0.3.2

6 months ago

0.3.0

8 months ago

0.3.1

7 months ago

0.2.6

2 years ago

0.2.5

2 years ago

0.2.3

2 years ago

0.2.4

2 years ago

0.2.2

2 years ago

0.2.1

2 years ago

0.2.0

2 years ago

0.1.1

2 years ago

0.1.0

2 years ago

0.0.0

2 years ago

0.0.3

2 years ago

0.0.5

2 years ago

0.0.4

2 years ago

0.0.6

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago