Smart Tab Folder

Owned by Radu Nicoara (Unlicensed)
Last updated: Jul 20, 2018
2 min read

The Smart Tab Folder component provides an easy and elegant way to organise your screens and reduce clutter.

Sample Markup

<smart-tab-folder #myTabFolder>
	<smart-tabfolder-tab label="Tab 1" key="firstTab" icon="Consultingwerk/SmartComponentsDemo/Web2/SalesrepCustomerTree/Images/businesspeople2.png" selected="true">
		<ng-template smartTabFolderPageContent>
				<p>Tab 1 content</p>
		</ng-template>
	</smart-tabfolder-tab>
	<smart-tabfolder-tab key="secondTab" label="Tab 2" [disabled]="true">
		<ng-template smartTabFolderPageContent>
				<p>Tab 2 content</p>
		</ng-template>
	</smart-tabfolder-tab>
</smart-tab-folder>

 

The smartTabFolderPageContent directive must be applied on an ng-template element. It is used to render the tab folder page's template dynamically.

Description

All attributes described below apply to individual smart-tabfolder-tab elements.

AttributeDescription
labelThe label to display for this tab page.
icon

The icon to display for this tab page. If an absolute URL is provided, then it is used as is.

If the provided URL begins with frontend://, then the value provided after the frontend:// prefix is interpreted as being relative to the NG app root.

selectedIndicates whether this tab should be selected on load. Please note that an initially selected tab is mandatory.
disabledIndicates whether this tab is enabled.
keyAn optional unique key that can be used to identify a tab. Can be used as an alternative to the tab index.

Available Methods

Method NameDescription
enablePage(page: number | string)Enables a tab page. The "page" argument may be the tab index (0 based) or the tab key.
disablePage(page: number | string)Disables a tab page. The "page" argument may be the tab index (0 based) or the tab key.
selectPage(page: number | string)Selects a tab page. The "page" argument may be the tab index (0 based) or the tab key.

Sample Usage


// Use a ViewChild when the form is using a HTML template


@ViewChild('myTabFolder') tabFolder: SmartTabFolderComponent;


ngAfterViewInit() {
   this.tabFolder.disablePage(0); //disables the first tab page, by index
   this.tabFolder.enablePage('firstTab'); //enables the first tab page, by key
   this.tabFolder.selectPage(1); //selects the second tab page, by index
   this.tabFolder.selectPage('firstTab'); //selects the first tab page, by key
}




// Use the Smart TabFolder Registry when the form is using a JSON layout


constructor(private tabFolderRegistry: SmartTabFolderRegistryService) { }


async ngOnInit() {
	const tabFolder = await this.tabFolderRegistry.getTabFolderAsync('myTabFolder'); // 'myTabFolder' is the object name
	tabFolder.disablePage(0); //disables the first tab page, by index
    tabFolder.enablePage('firstTab'); //enables the first tab page, by key
    tabFolder.selectPage(1); //selects the second tab page, by index
    tabFolder.selectPage('firstTab'); //selects the first tab page, by key
}