ng-slot-machine-button
v1.0.0-alpha.1
Published
An Angular component module with slot machine button effects
Downloads
8
Readme
Angular Slot Machine Button Component Module
See Also
Install & Import
npm install ng-slot-machine-button
In the module (e.g. AppModule
) where it will be used:
/* ... */
import { SlotMachineButtonModule } from 'ng-slot-machine-button';
@NgModule({
/* ... */
imports: [
SlotMachineButtonModule,
BrowserModule
]
})
export class AppModule { }
Example
1 minute setup
<lib-slot-machine-button [activeOnHover]="true">
<lib-slot-machine-wheel>
<div class="idle part">Slot Machine Button</div>
<div class="active part">Slot Machine Button</div>
</lib-slot-machine-wheel>
</lib-slot-machine-button>
A more advanced one
<lib-slot-machine-button [activeOnHover]="true" [bottomToTop]="true" [fadeBack]="true" [fadeBackDuration]="0.3">
<lib-slot-machine-wheel>
<div class="idle part">Slot</div>
<div class="active part">Slot</div>
</lib-slot-machine-wheel>
<lib-slot-machine-wheel [delay]="0.1">
<div class="idle part">Machine</div>
<div class="active part">Machine</div>
</lib-slot-machine-wheel>
<lib-slot-machine-wheel [delay]="0.2">
<div class="idle part">Button</div>
<div class="active part">Button</div>
</lib-slot-machine-wheel>
</lib-slot-machine-button>
Inputs
// ng-slot-machine-button
@Input() activeOnHover: boolean;
@Input() bottomToTop: boolean;
@Input() delay = 0;
@Input() duration = 0.5;
@Input() ease = Expo.easeInOut;
@Input() fadeDuration: number;
@Input() groupID: number;
@Input() isActive: boolean;
// Fade Back
@Input() fadeBack: boolean;
@Input() fadeBackDuration: number;
@Input() fadeBackEase = Linear.easeNone;
// ng-slot-machine-wheel
@Input() groupID: number;
@Input() delay = 0;