amp-dash is an Angular 4 component that types. Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set.
amp-dash was inspired by the SapientRazorfish logo and created to be used to follow the brand guidelines.
Demo Page
NOTE: amp-dash has been updated to Angular 4, but can be used with Angular 2 as well, so long as the dependencies are satisfied
Installation
To begin start by running
npm install --save amp-dash
Next import into your app module
//app.module.ts ;//Other imports
That's it! You are ready to use the amp-dash
component.
Usage
Basic usage
<!-- app.component.html -->
String Collections
You can provide string collections by passing an array to the typeText
property.
The strings can new lines by providing the \n
character.
<!-- app.component.html --> <!-- New line in strings -->
With type delay
You can provide a type delay i.e. the amount of time before the next character is printed by overriding the typeDelay
property.
typeDelay
is measured in milliseconds (ms).
<!-- app.component.html --> <!-- Provide a 300ms type delay -->
With erase delay
You can provide an erase delay i.e. the amount of time before the displayed string is erased by overriding the eraseDelay
property. eraseDelay
is used in combination with typeLoop
which loops over the collections of strings provided in the typeText
.
eraseDelay
is measured in milliseconds (ms).
<!-- app.component.html --> <!-- Provide a 3000ms (3 second) erase delay -->
Updating the cursor
By default amp-dash
comes the _
cursor character, which is animated by the class cursor
. In order to update the character and to style it differently you can use the cursorChar
& cursorClass
properties.
<!-- app.component.html --> <!-- Change the cursor character to `|` and class to `blinky-cursor` -->
Handling callbacks
You can handle the events like:
captionTyped
triggered when each string has finished being displayed on the screen.
Or
captionErased
triggered when each string has finished being erased from the screen.
<!-- app.component.html -->
Component Properties
Property | Type | Default Value | Description |
---|---|---|---|
typeText | string | array |
[''] |
The strings to be typed |
typeDelay | number |
100 |
Delay in ms before a character is printed |
eraseDelay | number |
2000 |
Delay in ms before the displayed string is erased |
typeLoop | boolean |
false |
Loop over the string collection |
cursorClass | string |
cursor |
Class name applied to the cursor character |
cursorChar | string |
_ |
The cursor character to be displayed by default |
captionTyped | function |
Event fired when each string has finished being displayed on the screen | |
captionErased | function |
Event fired when each string has finished being erased from the screen |