Accordion

An accordion is a group of vertically stacked, collapsible sections that allow users to toggle the visibility of related content.

Usage

API

Components

DaffAccordionComponent

import { DaffAccordionComponent } from '@daffodil/design/accordion'

Groups accordion items.

@Component()
class DaffAccordionComponent {}

DaffAccordionItemComponent

import { DaffAccordionItemComponent } from '@daffodil/design/accordion'

Contains the title and collapsible content. Handles expansion and collapse on user interaction. All <daff-accordion-item>s should be grouped inside a <daff-accordion>.

@Component()
class DaffAccordionItemComponent implements OnInit, DaffOpenable {
  @Input() itemId: string = 'daff-accordion-item' + '-' + ++daffAccordionItemId
  @Input() contentId: string = 'daff-accordion-item-content' + '-' + ++daffAccordionItemContentId
  @Input() initiallyExpanded: boolean = false

  @Output() toggled: EventEmitter<boolean> = new EventEmitter<boolean>()

  reveal(): void
  hide(): void
  toggle(): void
}

Inputs

itemId

string

Default	`'daff-accordion-item' + '-' + ++daffAccordionItemId`
Description	The unique id of an accordion item. Defaults to an autogenerated value.

contentId

string

Default	`'daff-accordion-item-content' + '-' + ++daffAccordionItemContentId`
Description	The unique id of an accordion item content. Defaults to an autogenerated value.

initiallyExpanded

boolean

Default	`false`
Description	Whether or not an accordion item is initially expanded by default.

Outputs

toggled

EventEmitter

Default	–
Description	Event fired when a component is opened (true) or closed (false)

() Methods

Directives

DaffAccordionItemTitleDirective

import { DaffAccordionItemTitleDirective } from '@daffodil/design/accordion'

Used to provide a high level overview of the panel content. It should be wrapped by a <daff-accordion-item>.

@Directive()
class DaffAccordionItemTitleDirective {}

Modules

DaffAccordionModule

Deprecated

import { DaffAccordionModule } from '@daffodil/design/accordion'

@NgModule()
class DaffAccordionModule {}