Have ideas to improve npm?Join in the discussion! »

    ng2-comps

    0.1.7 • Public • Published

    Angular 2 Comps (ng2-comps)

    This library is under development. Will contain a set of components to be used for easily creating angular2 web pages with pure native typescript and angular 2 code.

    The library

    The components

    The components are:

    • Modal - a normal modal window
    • Button - a normal button
    • Dropdown - a normal dropdown button
    • Text - a text typography container
    • IconComponent - a container for the icon
    • FormDatetimeComponent - datetime picker
    • FormTextComponent - input text
    • LeftComponent - fixed position left container (useful for menus)
    • RightComponent - fixed position right container (useful for right chat/notifications)
    • HeaderComponent - fixed position header container (useful for menus)
    • FooterComponent - fixed position footer container (useful for site info)

    The styles

    All the components are deeply customized through main scss system. It is possible to create or change your theme based on the scss property.

    Install the library

    npm install --save ng2-comps
    

    Import the library with SystemJs

    Add ng2-comps to your systemjs.config.js

    var map = {
        ...
        'ng2-comps':              'node_modules/ng2comps',
        ...
    
    };
    ...
    var packages = {
        ...
        'ng2-comps':              { main: 'index.js', defaultExtension: 'js' },
        ...
    };
    ...
    

    Add the library in your angular 2 components

    import { COMPS_DIRECTIVES } from 'ng2-comps';
    ....
    @Component({
        ...
        directives: [...,COMPS_DIRECTIVES],
        ...
    })
    

    Modal (ModalComponent)

    Usage

    <mm-modal #modalRef>
        <mm-modal-header-title>
            <mm-text>Header</mm-text>
        </mm-modal-header-title>
        <mm-modal-header-right>
            <mm-icon class="bigger fa-lg fa fa-times link" (click)="modalRef.close()"></mm-icon>
        </mm-modal-header-right>
        <mm-modal-footer-right>
            <mm-button (clickEvent)="modali.close()">Cancel</mm-button>
            <mm-button type="error" (clickEvent)="modalRef.close()">OK</mm-button>
        </mm-modal-footer-right>
    </mm-modal>
    

    Button (ButtonComponent)

    Usage

    <mm-button (clickEvent)="some_event()">Button Content</mm-button>
    

    Text (TextComponent)

    Usage

    <mm-text>Text here</mm-text>
    

    Dropdown (DropdownComponent)

    <mm-dropdown #drop (clickOutside)="drop.close()">
        <mm-dropdown-title>Sample</mm-dropdown-title>
        <mm-dropdown-item><a href="#">First item</a></mm-dropdown-item>
        <mm-dropdown-item><a href="#">Second item</a></mm-dropdown-item>
    </mm-dropdown>
    

    Install

    npm i ng2-comps

    DownloadsWeekly Downloads

    11

    Version

    0.1.7

    License

    ISC

    Last publish

    Collaborators

    • avatar