-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
268fdc3
commit 0089cf5
Showing
6 changed files
with
180 additions
and
160 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,24 +1,54 @@ | ||
| # AngularMessageBox | ||
|
|
||
| This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.0.0. | ||
|
|
||
| ## Code scaffolding | ||
|
|
||
| Run `ng generate component component-name --project angular-message-box` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project angular-message-box`. | ||
| > Note: Don't forget to add `--project angular-message-box` or else it will be added to the default project in your `angular.json` file. | ||
| ## Build | ||
|
|
||
| Run `ng build angular-message-box` to build the project. The build artifacts will be stored in the `dist/` directory. | ||
|
|
||
| ## Publishing | ||
|
|
||
| After building your library with `ng build angular-message-box`, go to the dist folder `cd dist/angular-message-box` and run `npm publish`. | ||
|
|
||
| ## Running unit tests | ||
|
|
||
| Run `ng test angular-message-box` to execute the unit tests via [Karma](https://karma-runner.github.io). | ||
|
|
||
| ## Further help | ||
|
|
||
| To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. | ||
| # ng-message-box | ||
| **ng-message-box** is a versatile and **user-friendly component** that enables seamless integration of **dynamic** and **customizable message boxes** into your **Angular** applications. | ||
|
|
||
| ## Whether you need to: | ||
| * Display **success notifications**, **error alerts**, **warning messages**, or **informative prompts**, this component has got you covered. | ||
|
|
||
| * With a **straightforward *API*** and a **range of configuration options**, you can easily tailor the appearance and behavior of the message boxes to match your application's design and user experience. The message-box component is highly responsive, ensuring a consistent and engaging messaging system across various devices and screen sizes. Empower your users with clear, concise, and visually appealing messages using the **ng-message-box** component to **enhance overall communication** and **user interaction** in your application. | ||
|
|
||
| ## Installation : | ||
| npm i ng-message-box | ||
|
|
||
| ## Usage : | ||
|
|
||
| ## App Module | ||
|
|
||
| import { AngularMessageBoxModule } from 'ng-message-box'; | ||
|
|
||
| @NgModule({ | ||
| declarations: [ | ||
| AppComponent, | ||
| ], | ||
| imports: [ | ||
| BrowserModule, | ||
| AppRoutingModule, | ||
| AngularMessageBoxModule | ||
| ], | ||
| providers: [ | ||
| ], | ||
| bootstrap: [AppComponent] | ||
| }) | ||
| export class AppModule { } | ||
|
|
||
| ## Template | ||
| <ng-message-box></ng-message-box> | ||
|
|
||
| ## Component | ||
|
|
||
| import { Component, AfterViewInit } from '@angular/core'; | ||
| import { AngularMessageBoxService } from 'ng-message-box'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-root', | ||
| templateUrl: './app.component.html', | ||
| styleUrls: ['./app.component.css'] | ||
| }) | ||
|
|
||
| export class AppComponent implements AfterViewInit { | ||
|
|
||
| constructor(private ms: AngularMessageBoxService) { } | ||
|
|
||
| ngAfterViewInit() { | ||
| setTimeout(() => { this.ms.SHOW_SUCCESS_MESSAGE("My message..."); }, 2000); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
114 changes: 114 additions & 0 deletions
114
projects/angular-message-box/src/lib/angular-message-box.component.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,114 @@ | ||
| .message-box { | ||
| display: block; | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 1rem; | ||
| position: fixed; | ||
| top: 80px; | ||
| z-index: 20; | ||
| background: #d70c27e3; | ||
| color: white; | ||
| width: 250px; | ||
| padding: .8rem; | ||
| border-radius: 0px 12px 12px 0px; | ||
| box-shadow: 0 2rem 2rem 0 rgba(0, 0, 0, .2); | ||
| animation: slide-in-left 1s; | ||
| transition: .4s all ease; | ||
| pointer-events: none; | ||
| white-space: normal; | ||
| } | ||
|
|
||
| .content { | ||
| border-left: 1px solid white; | ||
| padding-left: 1rem; | ||
| } | ||
|
|
||
| .message-title { | ||
| font-size: 1rem; | ||
| } | ||
|
|
||
| .message { | ||
| font-weight: 700; | ||
| font-size: .7rem; | ||
| } | ||
|
|
||
| /* VISIBLE STATES */ | ||
| .visible { | ||
| animation: slide-in-left 1s; | ||
| } | ||
|
|
||
| .slide-out { | ||
| animation: slide-out-left 2s; | ||
| } | ||
|
|
||
| .hidden { | ||
| transform: scale(0); | ||
| } | ||
|
|
||
|
|
||
| /* ANIMATIONS */ | ||
| /** | ||
| * ---------------------------------------- | ||
| * animation slide-in-left | ||
| * ---------------------------------------- | ||
| */ | ||
| @-webkit-keyframes slide-in-left { | ||
| 0% { | ||
| -webkit-transform: translateX(-1000px); | ||
| transform: translateX(-1000px); | ||
| opacity: 0; | ||
| } | ||
|
|
||
| 100% { | ||
| -webkit-transform: translateX(0); | ||
| transform: translateX(0); | ||
| opacity: 1; | ||
| } | ||
| } | ||
|
|
||
| @keyframes slide-in-left { | ||
| 0% { | ||
| -webkit-transform: translateX(-1000px); | ||
| transform: translateX(-1000px); | ||
| opacity: 0; | ||
| } | ||
|
|
||
| 100% { | ||
| -webkit-transform: translateX(0); | ||
| transform: translateX(0); | ||
| opacity: 1; | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * ---------------------------------------- | ||
| * animation slide-out-left | ||
| * ---------------------------------------- | ||
| */ | ||
| @-webkit-keyframes slide-out-left { | ||
| 0% { | ||
| -webkit-transform: translateX(0); | ||
| transform: translateX(0); | ||
| opacity: 1; | ||
| } | ||
|
|
||
| 100% { | ||
| -webkit-transform: translateX(-1000px); | ||
| transform: translateX(-1000px); | ||
| opacity: 0; | ||
| } | ||
| } | ||
|
|
||
| @keyframes slide-out-left { | ||
| 0% { | ||
| -webkit-transform: translateX(0); | ||
| transform: translateX(0); | ||
| opacity: 1; | ||
| } | ||
|
|
||
| 100% { | ||
| -webkit-transform: translateX(-1000px); | ||
| transform: translateX(-1000px); | ||
| opacity: 0; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
13 changes: 6 additions & 7 deletions
13
projects/angular-message-box/src/lib/angular-message-box.module.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,15 +1,14 @@ | ||
| import { NgModule } from '@angular/core'; | ||
| import { AngularMessageBoxComponent } from './angular-message-box.component'; | ||
| import { AngularMessageBoxService } from './angular-message-box.service'; | ||
| import { CommonModule } from '@angular/common'; | ||
|
|
||
|
|
||
|
|
||
| @NgModule({ | ||
| declarations: [ | ||
| AngularMessageBoxComponent | ||
| ], | ||
| imports: [], | ||
| exports: [ | ||
| AngularMessageBoxComponent | ||
| ] | ||
| declarations: [AngularMessageBoxComponent], | ||
| imports: [CommonModule], | ||
| providers: [AngularMessageBoxService], | ||
| exports: [AngularMessageBoxComponent] | ||
| }) | ||
| export class AngularMessageBoxModule { } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters