alfresco-ng2-components/docs/core/accordion.component.md
Andy Stark 06992196cd [ADF-2824] Reviewed docs for core and content services (#3290)
* [ADF-2824] Reviewed card view docs

* [ADF-2824] Reviewed doc for core and content services

* [ADF-2824] Added class name exception to prop script
2018-05-09 15:03:22 +01:00

1.7 KiB

Added, Status, Last reviewed
Added Status Last reviewed
v2.0.0 Active 2018-05-08

Accordion Component

Creates a collapsible accordion menu.

Accordion menu screenshot

Basic Usage

<adf-accordion>
    <adf-accordion-group [heading]="titleHeading" [isSelected]="true" [headingIcon]="'assignment'">
        <my-list></my-list>
    </adf-accordion-group>
</adf-accordion>
@Component({
    selector: 'my-component'
})
export class MyComponent implements OnInit {

    titleHeading: string;

    constructor() {
        this.titleHeading = 'My Group';
    }

}

Details

An accordion menu contains several panels of content, only one of which is visible at any time. The hidden panels are collapsed down to just the title and pushed together (like the bellows of an accordion) while the visible panel fills the remaining space in the menu.

Use one or more Accordion Group subcomponents to define the panels and set their properties (title, selection status, etc).

Example

You can use an accordion menu to wrap a process filter, as shown in the following example:

<adf-accordion>
    <adf-accordion-group 
        [heading]="'Processes'" 
        [isSelected]="true" 
        [headingIcon]="'assessment'">
        <adf-process-instance-filters
            [appId]="appId"
            (filterClick)="onProcessFilterClick($event)"
            (success)="onSuccessProcessFilterList($event)">
        </adf-process-instance-filters>
    </adf-accordion-group>
</adf-accordion>

how-create-accordion-menu

See also