Next Perpendicular Moonlanding

    @web-atrio/tabs-responsive
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    Angular Tabs-Responsive

    Important

    This package supports Angular 4

    Updates

    Description

    Simple Angular date time picker. Online demo is here. This picker is responsive design, so feel free to try it in your desktops, tablets and mobile devices. This picker uses MomentJS

    Installation

    To install this component, follow the procedure:

    1. Install with npm:npm install @web-atrio/tabs-responsive --save
    2. Add DateTimePickerModule import to your @NgModule like example below
      import { NgModule } from '@angular/core';
      import { BrowserModule } from '@angular/platform-browser';
      import { MyTestApp } from './my-test-app';
      
      import { TabsReponsiveModule } from '@web-atrio/tabs-responsive';
      
      @NgModule({
          imports:      [ BrowserModule, TabsReponsiveModule ],
          declarations: [ MyTestApp ],
          bootstrap:    [ MyTestApp ]
      })
      export class MyTestAppModule {}
    3. Create a file "variable.scss" in the folder "app" and insert :
      $mediaMaxWithTabsResponsive: 680px;

    Usage

    Use the following snippet inside your template. For example:

                <app-tabs>
                    <app-tab [tabTitle]="'Tabs 1'">
                        <div class="white"> Content 1</div>
                    </app-tab>
                    <app-tab [tabTitle]="'Tabs 2'"  [classLinkCss]="'colorRed'">
                        <div class="white"> Content 2</div>
                    </app-tab>
                    <app-tab [tabTitle]="'Tabs 3'"  [classLiCss]="'other'">
                        <div class="white"> Content 3</div>
                    </app-tab>
                </app-tabs>
    • Required attributes:

      • [tabTitle]=" 'My Title' " --- You can set the title.
    • Optional attributes:

      • [classLinkCss]=" 'cssClass' " --- You can set classCSS for link.
      • [classLiCss]=" 'cssClass' " --- You can set classCSS for li.

    Demo

    SOAP

    License

    • License: MIT

    Author

    • Author: Florin Sabri

    angular-2-4-Tabs-responsive

    Install

    npm i @web-atrio/tabs-responsive

    DownloadsWeekly Downloads

    1

    Version

    1.1.0

    License

    MIT

    Last publish

    Collaborators

    • web-atrio