website

Simple angular library :

• Button slide : show simple icon, on hover : show icon + text
• Button switch : ios like button switch

1. Install the library : npm i ad-library
2. Import the module :

import { AdLibraryModule } from 'ad-library';
@NgModule({
imports: [ ..., AdLibraryModule ], ...

3. (if you want to use TabsComponent) Import the module :

import { AdTabsModule } from 'ad-library';
@NgModule({
imports: [ ..., AdTabsModule ], ...

4. (optional) import an icon library like fontawesome (npm i @fortawesome/fontawesome-free)
5. Play with the component :-)

<ad-button-slide icon="fas fa-trash" label="Delete this" background="red"></ad-button-slide>

• ad-button-slide - (AdButtonSlideComponent) - button slide component object.

Parameters supported by this object:

• icon: string; - icon class, eg. 'fa fa-trash'
• label: string; - label displayed on hover
• background: string = '#aaa'; - css background color
• foreground: string = 'white'; - css font color
• backgroundOver: string = null; - css background color when mouseOver, if no value given : backgroundOver = background
• foregroundOver: string = null; - css font color when mouseOver, if no value given : foregroundOver = foreground
• mini: boolean = false; - boolean to make the button tiny

• ad-button-switch - (AdButtonSwitchComponent) - ios like button switch component object.

Parameters supported by this object:

• theme: string = 'flip'; - choose the button switch theme, can be flip or switch
• labelOn: string = ''; - for theme flip : label displayed when selected
• labelOff: string = ''; - for theme flip : label displayed when not selected
• iconOn: string = ''; - for theme flip : icon displayed when selected
• iconOff: string = ''; - for theme flip : icon displayed when selected
• ngModel: value to bind

• ad-tabs-component - (AdTabsComponent) - responsive tabs.

clone this project and run 'npm i && npm start'

MIT License

Adrien Dessilly