New Prague, Minnesota

    ngx-blade
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.4 • Public • Published

    NgxBlade

    Travis npm npm

    A simplistic blade component for Angular with minimize/maximize and a close button.

    Stackblitz Demo

    Installation

    Step 1: Install NPM package

     
    npm i ngx-blade --save
     

    Step 2: Import NgxBladeModule into in your module

     
    import { NgxBladeModule } from 'ngx-blade';
     
    @NgModule({
        //..
        imports:      [ NgxBladeModule, .. ]
    })
     

    Step 3: Add the default theme to src/styles.scss file.

     
    @import "~ngx-blade/default.scss";
     

    NgxBladeComponent

    Selector

     
    <ngx-blade></ngx-blade>
     

    Inputs

    • width: number - Width of the blade in percentage relative to the browser window.
    • config: BladeConfig - Blade configuration properties. See BladeConfig

    Outputs

    • onClose - Emitted when close button is clicked. if closeButton is set as false, this event will never be emitted.

    BladeConfig

    contains the following properties

     
    export interface BladeConfig {
        closeButton: boolean;    // default: true
        maximizeButton: boolean; // default: true
        isModal: boolean;        // default: false
    }
     
    • closeButton: boolean - specify whether blade should contain a close button.
    • maximizeButton: boolean - specify whether blade should contain the minimize/maxime button.
    • isModal: boolean - specify if the blade should behave similar a modal dialog.

    If a config is not provided as input, the default values will be used.

    Directives

    The following directives should be used within the <ngx-blade> element.

    • ngxBladeHeader - Blade Header element
    • ngxBladeBody - Blade body element
    • ngxBladeFooter - Blade footer element

    Sample Usage

     
    <ngx-blade width="50" (onClose)="onBladeClose()" *ngIf="showBlade" #blade>
      <div ngxBladeHeader>
        Blade title
      </div>
      <div ngxBladeBody>
        <div class="custom">
          <h4> Lorem Ipsum </h4>
          <button type="button" (click)="blade.close()">Close blade</button>
        </div>
        <!-- Not only normal html entities, but components can also be used -->
        <my-component></my-component>
      </div>
      <div ngxBladeFooter>
        Blade Footer
      </div>
    </ngx-blade>
     

    Theme customisation

    Since v0.3.0, ngx-blade supports theme customisation using SCSS variables. The following SCSS variables can be customised

     
    // blade border
    $ngxBladeBorderColor
     
    // blade header
    $ngxBladeHeaderBackground
    $ngxBladeHeaderTextColor
     
    // blade body
    $ngxBladeBodyBackground
    $ngxBladeBodyTextColor
     
    // blade header action buttons (Minimize/Maximize, Close) 
    $ngxBladeActionButtonBackground
    $ngxBladeCloseButtonHoverBackground
     
    // blade footer
    $ngxBladeFooterBackground
    $ngxBladeFooterTextColor
     

    For example, if you like to change the blade's header color, all you have to do is to assign ngxBladeHeaderBackground your preferred color before the default theme is imported.

    /src/styles.scss

     
    $ngxBladeHeaderBackground: rgba(127, 0, 0, 1);   // <---
    @import "~ngx-blade/default.scss";
     

    Theme Customisation Demo

    Install

    npm i ngx-blade

    DownloadsWeekly Downloads

    194

    Version

    0.3.4

    License

    MIT

    Unpacked Size

    80.7 kB

    Total Files

    25

    Last publish

    Collaborators

    • cyberpirate92