Welcome to the Alfresco Builder Network

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

NameTypeDefault valueDescription
selectedIndexnumber0The selected index tab.
titlestring | nullnullThe title of the info drawer.

Events

NameTypeDescription
currentTabEventEmitter<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

Interested in trying Alfresco?

Try Now