ng2-flashbox
Angular2 - FlashBox(ng2-flashbox) component
Last updated 2 years ago by vladimirpavk .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install ng2-flashbox 
SYNC missed versions from official npm registry.

ng2 - flashbox

npm version npm downloads-monthly npm downloads-total

FlashBox(ng2-flashbox) - angular2 component used to display simple user information messages.

FlashBox(ng2-flashbox) GitHub repo.

FlashBox(ng2-flashbox) development enviroment(Angular4, SystemJS, gulp) repo.

Try online-demo.

Installation

npm install ng2-flashbox --save

How to use FlashBox(ng2-flashbox) component

FlashBox(ng2-flashbox) component is a part of the CommonComponents module.

Configure your module loader. If you use SystemJs add the following mapings:

System.config({
    ...
    paths: {
      ...
      'npm:': 'node_modules/'
      ...
    },
    map: {
        ...
        'ng2-flashbox': 'npm:ng2-flashbox/index.js'
        ...
    }
    ...
})

Import CommonComponents module in your application module.

... 
Import { CommonComponentsModule } from 'ng2-flashbox';
...
@NgModule({
    ...
     imports: [ ...
         CommonComponentsModule 
         ...
         ],
    ...
})

Use FlashBox(ng2-flashbox) component within component template with <flash-box></flash-box> tags.

Place your HTML based message inside element like this

<flash-box>
        <!-- HTML Message -->
        <div style="border-type: solid; border-width:2px">
            <label style="color: rgb(0,0,0); text-decoration: underline;">Information message</label>
           <label>
            Any message
            </label>
        </div>
</flash-box> 

Attributes

<flash-box type="typeValue" position="positionValue" max-width="maxWidthValue" setTimeout="setTimeoutValue">
        <!-- HTML message -->
</flash-box>    
  1. typeValue: string, default: primary.

Specify FlashBox type. Available values(bootstrap label types): default, primary, success, info, warning, danger.

  1. positionValue: string, default: tr.

Specify FlashBox position. Available values:

  • tr - top-right,
  • tm - top-middle,
  • tl - top-left,
  • cr - center-right,
  • cm - center-middle,
  • cl - center-left,
  • br - bottom-right,
  • bm - bottom-middle,
  • bl - bottom-left
  1. maxWidthValue: string, default: 300px

Specify FlashBox maximum width.

  1. setTimeoutValue: number, default: 2000

Specify the amount of time FlashBox is visible in ms.

Actions

Use angular2 template local variable(TLV) system or invoke a method from a controller.

Template local variable example

    <flash-box .... #tlv_name>
        ....
    </flash-box>
    
    <button (click)="tlv_name.available_action()">Cause flashbox action</button>

Controller method invokation example

reference component source

    import { FlashBoxComponent } from 'ng2-flashbox';

reference component from template local variable using

    @ViewChild("tlv_name") tlv:FlashBoxComponent;
    tlv.available_action();

Methods( available_action() ):

  1. flashOnce():void - show FlashBox once for setTimeout time.
  2. show():void - show FlashBox.
  3. hide():void - hide FlashBox.
  4. startFlashing():void - start flashing. Transition period between unvisible and visible is set to 0,5 sec and is currently unconfigurable. The FlashBox control is shown for setTimeout time.
  5. stopFlashing():void - stop flashing.
  6. toogle():void - toggle show/hide control.
  7. flashTimes(number numOfTimes):void - show FlashBox numOfTimes times.
  8. version():string - to return the current version of the control

Events:

  1. busyEvent() - fires when FlashBox is busy. When show() on FlashBox that is already shown. When hide() on FlashBox that is already hidden. When flashOnce() on FlashBox that is already shown or blinking. When startFlashing() on FlashBox that is already shown or blinking. When flashTimes(number numOfTImes) on FlashBox that is alread shown or blinking.
  2. onStartVisibleEvent() - fires when FlashBox is starting to show.
  3. onEndVisibleEvent() - fires when FlashBox is completely shown.
  4. onStartHiddenEvent() - fires when FlashBox is starting to become unvisible.
  5. onEndHiddenEvent() - fires when FlashBox is completely invisible.
  6. invalidValueEvent() - fires when setTimeout to number that is less or equal 0.
  7. onTypeChangedEvent - fires when you change type property of the control.
  8. onPositionChangedEvent - fires when you change position property of the control.
  9. onMaxWidthChangedEvent - fires when you change maxwidth property of the control.
  10. onTimeoutChangedEvent - fires when you change setTimeout property of the control.

Current Tags

  • 0.2.12                                ...           latest (2 years ago)

24 Versions

  • 0.2.12                                ...           2 years ago
  • 0.2.11                                ...           2 years ago
  • 0.2.10                                ...           2 years ago
  • 0.2.9                                ...           2 years ago
  • 0.2.8                                ...           2 years ago
  • 0.2.7                                ...           2 years ago
  • 0.2.6 [deprecated]           ...           2 years ago
  • 0.2.5                                ...           2 years ago
  • 0.2.4                                ...           2 years ago
  • 0.2.3                                ...           2 years ago
  • 0.2.2 [deprecated]           ...           2 years ago
  • 0.1.10                                ...           2 years ago
  • 0.2.0                                ...           2 years ago
  • 0.1.9                                ...           2 years ago
  • 0.1.8                                ...           2 years ago
  • 0.1.7                                ...           3 years ago
  • 0.1.6                                ...           3 years ago
  • 0.1.5                                ...           3 years ago
  • 0.1.4                                ...           3 years ago
  • 0.1.3                                ...           3 years ago
  • 0.1.2                                ...           3 years ago
  • 0.1.0                                ...           3 years ago
  • 0.0.2 [deprecated]           ...           3 years ago
  • 0.0.1 [deprecated]           ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 49
Dependencies (3)
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |