Description:
Simple to use (Angular) component for displaying messages for a brief moment.
INSTALLATION:
Using NPM:
npm install --save sdk-message
CONFIGURATION:
To configure the sdk-message
for your application, add the following lines to your app.module.ts file:
import { SDKMessageModule } from 'sdk-message';
@NgModule({
imports: [
SDKMessageModule
]
})
export class AppModule { }
USAGE:
<sdk-message [(message)]="message"></sdk-message>
<sdk-message [(message)]="message" height="50px"></sdk-message>
<sdk-message [(message)]="message" style="height: 50px;"></sdk-message>
<sdk-message [(message)]="message" style="color: red; background-color: yellow;" [timer]=10></sdk-message>
List of properties:
message (string)
: Message to display. (See NOTE)height (string)
: Height (pixel-based 'px') of the message box. Default: 35px.style (string)
: Custom style to apply to message. Default: blue background/white font.timer (number)
: Time (in seconds) to display the message. Default: 5 (seconds).
NOTE: The sdk-message
component clears the calling 'message' property be default. This is the reason for the required two-way binding [(message)].
The message will remain on the screen for the "timer" amount. If you click the message, it will close. If you move your mouse over the message, it will pause until you move your mouse away.