AdButtonSlide

website

Button Slide : show simple icon, on hover : show icon + text

Using ad-button-slide in a project

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

   import { AdButtonSlideModule } from 'ad-button-slide';
   @NgModule({
   imports: [ ..., AdButtonSlideModule ], ...
   

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

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

Properties

• 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

Example

Test library

clone this project and run ‘npm i && npm start’

License

MIT License

Author

Adrien Dessilly