sdk-tabs

Description:

Simple to use (Angular) component for organizing your content and UI layout.

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 { }

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: {}
    },
];

List of 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 force an initial active tab ONLY.
    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.

Properties for Tab type:

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.
}