1.0.4 • Published 7 years ago
hpb-elastic-buttons v1.0.4
HPB Elastic Buttons - Svg Elastic buttons
Requirements
Animations requiere Snap.svg
<script src="//cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
Installation
$ npm install hpb-elastic-buttons --save
Usage
Import in your module
import { ButtonComponent } from 'hpb-elastic-buttons/elastic-button/button.component';
import { ButtonLongComponent } from 'hpb-elastic-buttons/elastic-button-long/button.long.component';
@NgModule({
declarations: [
...
ButtonComponent,
ButtonLongComponent,
...
],
...
})
Use as a directive
<elastic-button [btnText]="'Button'" [mainColor]="' #333444 '" (click)=" anyFunction() "></elastic-button>
or
<elastic-button [btnText]="varName" [mainColor]="' #333444 '" (click)=" anyFunction() "></elastic-button>
in your component
varName: string = 'Button';
Example with Ionicons*
varName: string = '<i class="icon ion-ios-checkmark-outline></i>"';
*requires
<link rel="stylesheet" type="text/css" href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
Inputs
Input | Default | Type | Required |
---|---|---|---|
mainColor | #6AB7FC | string | no |
btnText | - | string | yes |
Credits
This is an angular adaptation of codrops "Elastic elements" you can find it here
License
MIT