Accordion

An accordion is a group of vertically stacked headings used to toggle the visibility of a section of content.

DaffAccordionModule

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

@NgModule()
class DaffAccordionModule {}

DAFF_ACCORDION_COMPONENTS

DAFF_ACCORDION_COMPONENTS imports all the available components and directives related to the component.

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

const DAFF_ACCORDION_COMPONENTS: readonly [typeof DaffAccordionComponent, typeof DaffAccordionItemComponent, typeof DaffAccordionItemTitleDirective]

DaffAccordionComponent

A wrapper for grouping accordion items.

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

@Component()
class DaffAccordionComponent {}

Selector: 'daff-accordion'

DaffAccordionItemComponent

The wrapper for the title and content. It handles the expansion and collapse of the inner content when clicked. All daff-accordion-items should be grouped inside the daff-accordion component.

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

@Component()
class DaffAccordionItemComponent implements OnInit, DaffOpenable {
  @Input() itemId: string
  @Input() contentId: string
  @Input() initiallyExpanded: false
  @Input() disabled: false
  reveal()
  hide()
  toggle()
}

Selector: 'daff-accordion-item'

Properties

Name	Type	Description
@Input() itemId	string	The unique id of an accordion item. Defaults to an autogenerated value.
@Input() contentId	string	The unique id of an accordion item content. Defaults to an autogenerated value.
@Input() initiallyExpanded	false	Whether or not the item is initially opened by default.
@Input() disabled	false	Disables an accordion item and prevents it from being expanded or collapsed.
reveal		Reveals the contents of the accordion item.
hide		Hides the contents of the accordion item.
toggle		Toggles the visibility of the contents of the accordion item.

DaffAccordionItemTitleDirective

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

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

@Directive()
class DaffAccordionItemTitleDirective {}

Selector: '[daffAccordionItemTitle]'