info-drawer-tab.component.md

Title	Added	Status	Last reviewed
Info Drawer Tab component	v2.4.0	Active	2018-06-08

Info Drawer Tab component

Renders tabs in a Info drawer component.

Basic usage

Render a tab with label:

<adf-info-drawer>

    <adf-info-drawer-tab label="Tab1">
        <div>Tab1 content</div>
    </adf-info-drawer-tab>

    <adf-info-drawer-tab label="Tab2">
        <div>Tab2 content</div>
    </adf-info-drawer-tab>

</adf-info-drawer>

Render tab with icons instead of labels:

<adf-info-drawer>

    <adf-info-drawer-tab icon="comment">
        <div>Tab1 content</div>
    </adf-info-drawer-tab>

    <adf-info-drawer-tab icon="people">
        <div>Tab2 content</div>
    </adf-info-drawer-tab>

</adf-info-drawer>

You can also combine icon and label properties.

Class members

Properties

Name	Type	Default value	Description
icon	string	null	Icon to render for the tab.
label	string	""	The title of the tab (string or translation key).

Details

See the Info drawer component page for details of how to use this subcomponent.

See also

• Info drawer component
• Info drawer layout component