semi-toast v0.0.8

#Semi toast for angular 6

###Major Features

• lightweight, easy to use.
• easily to extend, and modify.
• no css encapsulation.
• built in latest angular version.

##setup:-

####Start using it by npm command

$npm install semi-toast

####Import SemiToastModule

( SemiToastModule ) must be imported in the module you wanna use the toast in it, e.g AppModule.imports array.

####Use semiToast directive

this directive tells angular where the toast should apper ( actually it's a structual directive so you must add the astrisk before it ) on a ( ng-container ) tag, see the examble below:-

<aside>
    <ng-container *semiToast></ng-container>
</aside>

• if you wanna provide a value for the direction of the page, insert it as boolean after assignment operator:-

<aside>
    <ng-container *semiToast="false"></ng-container>
</aside>

• notice: you can use property binding with the directive as angular said:-

component:-
isRtl = true;

<aside>
    <ng-container *semiToast="isRtl"></ng-container>
</aside>

####Import SemiToastService you need to injcet this service in your component or directive in oreder to send toast from it

import { SemiToastService } from 'semi-toast'

constractor ( private semiService: SemiToastService ) {}

invoke Toasting method

this.semiService.Toasting(options);

###We are done ^^

###Options there are a few options in order to customize it

• position.
• icon.
• duration.
• description

const toast = {
    desc: {
        arabic: 'Some arabic info',
        english: 'Some english info'
    },
    icon: 'success',
    position: {
        left: true,
        top: true
    }
}

• description ( desc ) it's an object with two keys, for arabic (ltr) description and for english, to describe the text that should apper within the toast, notice: both of them are string and required.

using the directive provided you can enter the direction of the page ( rtl or ltr ) as a bollean value see above code.

• icon ( icon ) the icon that describe the state of the toast: warning, danger and success as string, the value value depend on your choose, this is optional key, so if you not provide it, the success is the default one.

• position the position key take an object to specify where you wanna put the toast, this is optional key so if you didn't provide it, the directive will resolve the default value. you can choose 4 position until now, ( top and left, top and right, bottom and left, bottom and right ), if any of them not provided, the default will be taken ( bottom and right ).

notice: in mobile screen the toast is centered top or bottom

###right to left direction

arabic key it's just an ltr typography, this mean you can provide any text from any language, the benfit of this key is that when the direction of the page is ltr the position of the toast will change to bottom and left as a default, remember if you set a position key the value of it will treated as a default for two directions.

##worth to mention that this library built upon angular 6

###this is just a a beta version of the toast.