Description:

The sdk-tabs component is an easy way to organize and display infomation in your application which minimizes cognitive overload on the user.

NOTE: This package leverages the sdk-core-library for core configurations (i.e., colors, icons, etc.).

INSTALLATION:

Using NPM:

npm install --save sdk-tabs

CONFIGURATION:

To configure the sdk-tabs for your application, add the following lines to your app.module.ts file:

import { SDKTabsModule } from 'sdk-tabs';

@NgModule({
    imports: [
        SDKTabsModule
    ]
})
export class AppModule { }

PROPERTIES:

// Required properties.
tabs: Tab[] = []; // List of tabs. See properties list below.

// Optional properties.
activeTab: Tab | undefined; // Set the current active tab. This is used to load a tab from a share.
fontFamily: string = ""; // Font to use for the tab titles.
fontColor: string = ""; // Color to use for the tab titles.
tabColor: string = ""; // Color of the tabs.
tabBorderColor: string = ""; // Border color of the tabs.
activeTabColor: string = ""; // Active tab color.
activeFontColor: string = ""; // Active tab font color.
height: string = ""; // Height of tabs. Default is auto.
share: boolean = false; // Enable share icon.
urlParams: string = ""; // Additional Url parameters for sharing.
tabChangedEvent: EventEmitter<{ from: any, to: any }> = new EventEmitter(); // Callback when active tab changes.

Tab {
    title: string; // Name on the tab.
    type?: Type<any>; // The component to display when the tab is selected.
    inputs?: any; // Input properties for the component displayed.
    outputs?: any // Output properties for the component displayed.
}

USAGE:

<!-- Simple (out-of-the-box) -->
<sdk-tabs [tabs]="tabs"></sdk-tabs>

<!-- Advanced -->
<sdk-tabs
    [share]=true
    fontFamily="Courier New"
    fontColor="white"
    tabColor="green"
    tabBorderColor="black"
    activeFontColor="green"
    activeTabColor="white"
    height="100px"
    [tabs]="tabs">
</sdk-tabs>

import { Tab } from 'sdk-tabs';

public tabs: Tab[] = [
    {
        title: "Introduction",
        type: <any>IntrodutionTabComponent,
        inputs: {
            "title": "Introducing TABS! The easiest way to organize your layout."
        },
        outputs: {}
    },
    {
        title: "The Basics",
        type: <any>TheBasicsTabComponent,
        inputs: {
            "title": "The Basics - A simple out-of-the-box design."
        },
        outputs: {}
    },
    {
        title: "Advanced",
        type: <any>AdvancedTabComponent,
        inputs: {
            "title": "Advanced Options and Setup."
        },
        outputs: {}
    },
];