Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hardy12994/cook-toast
Toaster - An Indication for User What to do NEXT or What NOT to do or Any Error or Any Successful Message
https://github.com/hardy12994/cook-toast
cook cook-toast position slide-animation toast
Last synced: 3 months ago
JSON representation
Toaster - An Indication for User What to do NEXT or What NOT to do or Any Error or Any Successful Message
- Host: GitHub
- URL: https://github.com/hardy12994/cook-toast
- Owner: hardy12994
- Created: 2017-11-02T06:53:58.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2018-02-21T10:04:01.000Z (almost 7 years ago)
- Last Synced: 2024-10-07T08:11:06.272Z (3 months ago)
- Topics: cook, cook-toast, position, slide-animation, toast
- Language: TypeScript
- Size: 29.3 KB
- Stars: 6
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### Cook your Toast with Cook-Toast
#### Note - **For Angular 5 please reffer to this [**Cook-Toast-NG5**](https://www.npmjs.com/package/cook-toast-ng5)**
 
 
#### Installation -
```
npm install cook-toast --save
```
### Where its need ?
- To give the indication to the user what the next step is.
- To give warning to user like Please Not try this Again.
- If I want to show the Success response on the UI.
- If I want to show the Failure response on UI.
### How to use ?
Import the *`CookToastModule`* in your main NgModule of your application
and insert this module in your imports array of NgModule.
```
//main module
import { CookToastModule } from 'cook-toast';
@NgModule({
imports :[
CookToastModule
]
})
```
Now Import the *`KitchenService`* in your Component to make use of it in HTML's
Don't forget to Inject it in your component Constructor.
So yeah !!! you are the point to use your TOAST. Their are Four Type
of TOAST you can use to make the user indications what to do NEXT.
```sh
import { KitchenService } from 'cook-toast';
class MyToastComponent {
constructor(private kitchenService: KitchenService){
this.kitchenService.cook('Hey I am your Toast', 's');
this.kitchenService.cook('Hey I am your Toast', 'f');
this.kitchenService.cook('Hey I am your Toast', 'w');
this.kitchenService.cook('Hey I am your Toast', 'i');
}
}
```
Which for which ?
- s is for **SUCCESS**. 
- f is for **FAILURE**. 
- w is for **WARNING**. 
- i is for **INFORMATION**. 
Now How it should be set in HTML ?
```sh
```
So here -
- `cook-toast` is the your Directive Name.
- Ist Param `5` is Stay Time on Screen. It is in Seconds.
- IInd and IIIrd Param are for Position of your toast. So, just set `true` for two positions.
- These are the possible postions ->
- `top:true;left:true`
- `top:true;right:true`
- `bottom:true;left:true`
- `bottom:true;right:true`
### RUN-TIME Positions -
If you want to provide **RUN-TIME Positions** for your Cook-Toast
then just insert the object of postions like this -
```sh
this.kitchenService.cook('Hey I am your Toast', 'i', {
right: true,
bottom: true
});
```
**NOTE** -
If you Don't Set the Position of your TOAST it will comming to
By default **LEFT-TOP**.
### Want to make Slide Animation in Toast? -
If you want to slide your Toast to the to the Vertical Sides,
just make the fourth Parameter `true` while you cook your toast
in RUNTIME and you can also use in your HTML Parameters.
- For Runtime **Slide Animation** -
```sh
this.kitchenService.cook('Hey I am your Toast', 'i', {
right: true,
bottom: true
}, true);
```
- For HTML **Slide Animation**
```sh
```
##### Contributions are Most Welcome.
##### Hope you Like it !