AD Library
Simple angular library :
- Button slide : show simple icon, on hover : show icon + text
- Button switch : ios like button switch
Using ad-library in a project
- Install the library :
npm i ad-library - Import the module :
import { AdLibraryModule } from 'ad-library'; @NgModule({ imports: [ ..., AdLibraryModule ], ... - (if you want to use TabsComponent) Import the module :
import { AdTabsModule } from 'ad-library'; @NgModule({ imports: [ ..., AdTabsModule ], ... - (optional) import an icon library like fontawesome (
npm i @fortawesome/fontawesome-free) - Play with the component :-)
<ad-button-slide icon="fas fa-trash" label="Delete this" background="red"></ad-button-slide>
Properties
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 hoverbackground: string = ‘#aaa’; - css background colorforeground: string = ‘white’; - css font colorbackgroundOver: string = null; - css background color when mouseOver, if no value given : backgroundOver = backgroundforegroundOver: string = null; - css font color when mouseOver, if no value given : foregroundOver = foregroundmini: boolean = false; - boolean to make the button tiny
Button Switch
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 switchlabelOn: string = ‘’; - for theme flip : label displayed when selectedlabelOff: string = ‘’; - for theme flip : label displayed when not selectediconOn: string = ‘’; - for theme flip : icon displayed when selectediconOff: string = ‘’; - for theme flip : icon displayed when selectedngModel: value to bind
Example
Tabs
ad-tabs-component- (AdTabsComponent) - responsive tabs.
Test library
clone this project and run ‘npm i && npm start’
License
MIT License
Author
Adrien Dessilly