DaffAccordionItemComponent

class

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

Examples

 <daff-accordion-item>
   <div daffAccordionItemTitle>Title</div>
   <div>Accordion content</div>
 </daff-accordion-item>

 <daff-accordion-item>
   <div daffAccordionItemTitle>Title</div>
   <div>Accordion content</div>
 </daff-accordion-item>