Accordion
An accordion allows generic content to be collapsed and allows users to expand to show more detail.
Angular Components
ClrAccordion
Selector & Basic Usage
Properties
| Binding | Type | Options | Default | Description |
|---|---|---|---|---|
| [clrAccordionMultiPanel] | input | true, false | false | If true allows multiple panels to be open at the same time. |
ClrAccordionContent
ClrAccordionContent is a child of ClrAccordionPanel
Selector & Basic Usage
ClrAccordionDescription
ClrAccordionDescription is a child of ClrAccordionPanel
Selector & Basic Usage
ClrAccordionPanel
Use content projection and give the panel a title and content that can be hidden or shown. ClrAccordionPanel is a child of ClrAccordion
Selector & Basic Usage
Bindings
| Binding | Type | Options | Default | Description |
|---|---|---|---|---|
| [clrAccordionPanelDisabled] | input | true, false | false | When true this disables click events from opening/closing the panel. |
| [(clrAccordionPanelOpen)] | two-way | false | Use this to set the open or closed state of the panel. it emits the open (true)/ closed (false) state of the panel |
Methods
togglePanel():void
Opens and close the panel.
getPanelStateClasses(panel: AccordionPanelModel):void
Public accessor used by the template
Name Type Description panel AccordionPanelModel A panel of the accordion.
getAccordionContentId(id: string):string
Public accessor used by the template
Name Type Description id string Create a specific id for the panel content.
getAccordionHeaderId(id: string):string
Public accessor used by the template
Name Type Description id string Create a specific id for the panel header.
ClrAccordionTitle
Selector & Basic Usage
Angular Directives
*clrIfExpanded
A structural directive that optimizes the accordion by only creating the panel content node when its in the open state. The panel content node is removed from the DOM when closed. The default is false.