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
  @Input() disabled: boolean = false

  @Input() @HostBinding() toggled: boolean = false

  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.

disabled

boolean

Default	`false`
Description	Disables an accordion item and prevents it from being expanded or collapsed.

Outputs

toggled

boolean

Default	–
Description	Controls whether the component is open.

() 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 {}