mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-12 17:04:57 +00:00

Andy Stark 2c49de6070 [ADF-3514] Added transclusions sections to doc files (#3756 )

* [ADF-3514] Added transclusion sections and guide page

* [ADF-3514] Updated tables of contents where needed

* [ADF-3514] Updated index files

2018-09-10 11:11:25 +01:00

1.9 KiB

Raw Blame History

Added, Status, Last reviewed

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

Accordion Component

Creates a collapsible accordion menu.

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';
    }

}

Transclusions

Content for the accordion menu is transcluded within one or more Accordion group components

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 transclude the content for 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>

1.9 KiB Raw Blame History