1 | # ng2 - flashbox
|
2 | [![npm version](https://img.shields.io/npm/v/ng2-flashbox.svg)](https://www.npmjs.com/package/ng2-flashbox) [![npm downloads-monthly](https://img.shields.io/npm/dm/ng2-flashbox.svg)](https://www.npmjs.com/package/ng2-flashbox) [![npm downloads-total](https://img.shields.io/npm/dt/ng2-flashbox.svg)](https://www.npmjs.com/package/ng2-flashbox)
|
3 |
|
4 | FlashBox component is angular2 component provided to display simple user information messages.
|
5 |
|
6 | GitHub repository for component module can be found here [ng2-flashbox](https://github.com/vladimirpavk/ng2-flashbox/).
|
7 |
|
8 | GitHub repository for sample application can be found here [Angular2-FlashBoxComponent](https://github.com/vladimirpavk/Angular2-FlashBoxComponent).
|
9 |
|
10 | Online sample application can be found at github pages [online-demo](https://vladimirpavk.github.io/Angular2-FlashBoxComponent/).
|
11 |
|
12 | ### Dependencies
|
13 | FlashBox is angular2 component dependent on only **@angular/core** and **@angular/platform-browser** modules.
|
14 |
|
15 | ### Installation
|
16 | ```
|
17 | npm install ng2-flashbox --save
|
18 | ```
|
19 |
|
20 | ### How to use FlashBox component
|
21 | FlashBox component is (for now only) part of the CommonComponents module.
|
22 |
|
23 | In order to use the module you must configure your module loader. In case you use **systemjs** module loader add the following mapings:
|
24 | ```
|
25 | System.config({
|
26 | ...
|
27 | paths: {
|
28 | ...
|
29 | 'npm:': 'node_modules/'
|
30 | ...
|
31 | },
|
32 | map: {
|
33 | ...
|
34 | 'commoncomponents': 'npm:ng2-flashbox'
|
35 | ...
|
36 | },
|
37 | packages: {
|
38 | ...
|
39 | commoncomponents: {
|
40 | main: './commoncomponents.module.js',
|
41 | defaultExtension: 'js'
|
42 | }
|
43 | ...
|
44 | }
|
45 | ...
|
46 | })
|
47 | ```
|
48 |
|
49 | In your application module definition file import CommonComponents module.
|
50 | ```
|
51 | ...
|
52 | Import { CommonComponentsModule } from 'commoncomponents';
|
53 | ...
|
54 | @NgModule({
|
55 | ...
|
56 | imports: [ CommonComponentsModule ],
|
57 | ...
|
58 | })
|
59 | ```
|
60 |
|
61 | Now we can use FlashBox component in our module declared components templates with ```<flash-box>``` element.
|
62 | Place your HTML based user information message inside element.
|
63 |
|
64 | ```
|
65 | <flash-box>
|
66 | <!-- HTML Message -->
|
67 | <div style="border-type: solid; border-width:2px">
|
68 | <label style="color: rgb(0,0,0); text-decoration: underline;">Information message</label>
|
69 | </div>
|
70 | <label>
|
71 | Any message
|
72 | </label>
|
73 | </flash-box>
|
74 |
|
75 | ```
|
76 |
|
77 | ### Attributes
|
78 |
|
79 | ```
|
80 | <flash-box type="type_value" position="position_value" max-width="maxwidth_value" setTimeout="setTimeout_value">
|
81 | <!-- HTML message -->
|
82 | </flash-box>
|
83 | ```
|
84 |
|
85 | 1. **type_value**: *string*, default: **primary**
|
86 | Specify FlashBox type.
|
87 |
|
88 | Available types: **default**, **primary**, **success**, **info**, **warning**, **danger**
|
89 | based on default bootstrap label types
|
90 |
|
91 | 2. **position_value**: *string*, default: **tr**.
|
92 | Specify FlashBox position.
|
93 |
|
94 | Available values:
|
95 | * **tr** - top-right,
|
96 | * **tm** - top-middle,
|
97 | * **tl** - top-left,
|
98 | * **cr** - center-right,
|
99 | * **cm** - center-middle,
|
100 | * **cl** - center-left,
|
101 | * **br** - bottom-right,
|
102 | * **bm** - bottom-middle,
|
103 | * **bl** - bottom-left
|
104 |
|
105 | 3. **max-width_value**: *string*, default: **300px**
|
106 | Specify FlashBox component maximum width.
|
107 |
|
108 | 4. **setTimeout_value**: *number*, default: **2000**
|
109 | Specify the amount of time the component is visible in *ms*. Default is **2 sec**.
|
110 |
|
111 |
|
112 | ### Actions
|
113 |
|
114 | In order to cause an flashbox control action use angular2 template local variable system or controler method invokation.
|
115 |
|
116 | #### **Template local variable example**
|
117 | ```
|
118 | <flash-box .... #tlv_name>
|
119 | ....
|
120 | </flash-box>
|
121 |
|
122 | <button (click)="tlv_name.available_action()">Cause flashbox action</button>
|
123 | ```
|
124 |
|
125 | #### **Controller method invokation example**
|
126 |
|
127 | reference component source
|
128 | ```
|
129 | import { FlashBoxComponent } from 'commoncomponents/components/flashbox/flashbox.component';
|
130 | ```
|
131 |
|
132 | reference component from template local variable using
|
133 | ```
|
134 | @ViewChild("tlv_name") tlv:FlashBoxComponent;
|
135 | tlv.available_action();
|
136 | ```
|
137 |
|
138 | ##### **Available actions(available_action())**:
|
139 | 1. **flashOnce():void** - Show flashbox only once for **setTimeout** amount of time
|
140 | 2. **show():void** - Make control visible for unlimited amount of time (or untill some other action happens)
|
141 | 3. **hide():void** - Make control hidden for unlimited amount of time (or untill some other action happens)
|
142 | 4. **startFlashing():void** - Start flashing for unlimited amount of time (or untill some other action happens).
|
143 | Transition period from unvisible to visible is set to **0,5 sec** and is currently unconfigurable. The flashbox control us shown for **setTimeout** amount of time.
|
144 | 5. **stopFlashing():void** - Stop flashing
|
145 |
|
146 |
|
147 |
|
148 |
|
149 |
|
\ | No newline at end of file |