alfresco-ng2-components/docs/core/info-drawer.component.md

1.6 KiB

Added, Status, Last reviewed
Added Status Last reviewed
v2.0.0 Active 2018-04-10

Info Drawer component

Displays a sidebar-style information panel with tabs.

Info drawer screenshot

Basic usage

<adf-info-drawer title="Activities" (currentTab)="getActiveTab($event)">
    <div info-drawer-buttons>
        <mat-icon (click)="close()">clear</mat-icon>
    </div>

    <adf-info-drawer-tab label="Activity">
        <mycomponent1></mycomponent1>
        <mycomponent2></mycomponent2>
    </adf-info-drawer-tab>

    <adf-info-drawer-tab label="Details">
        <mycomponent3></mycomponent3>
    </adf-info-drawer-tab>

</adf-info-drawer>

Class members

Properties

Name Type Default value Description
selectedIndex number 0 The selected index tab.
title `string null` null

Events

Name Type Description
currentTab EventEmitter<number> Emitted when the currently active tab changes.

Details

This is a variant of the Info Drawer Layout component that displays information in tabs. You can use the adf-info-drawer-tab subcomponent to add tabs (as shown in the example) and the currentTab output property to select the currently active tab.

You can also customize the three regions (title, buttons and content) as with the Info Drawer Layout component.

See also