alfresco-ng2-components/docs/core/components/info-drawer.component.md
Andy Stark 5fc05da7aa [ADF-4152] Updated folder structure of core docs (#4415)
* [ADF-4152] Moved core library docs into subfolders

* [ADF-4152] Moved core library docs into subfolders

* [ADF-4152] Manual fixes to core doc file links

* [ADF-4152] Further automatic + manual link tidying
2019-03-12 14:20:20 +00:00

2.1 KiB

Title, Added, Status, Last reviewed
Title Added Status Last reviewed
Info Drawer component v2.0.0 Active 2018-06-08

Info Drawer component

Displays a sidebar-style information panel with tabs.

Info drawer screenshot

Basic usage

Transclusions

There are three regions where you can add your own content using <div> elements with the following names (as with the Info drawer layout component):

  • info-drawer-title
  • info-drawer-buttons
  • info-drawer-content

The tabs are added using one or more <adf-info-drawer-tab> elements, which can have any content you like:

<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 The title of the info drawer.

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 Info drawer tab subcomponent to add tabs (as shown in the example) and the currentTab output property to select the currently active tab.

See also