This is an Angular wrapper for rough-notation, a small JavaScript library to create and animate annotations on a web page.
You can play around with the demo here.
Install rough-notation, which is peer dependency to this wrapper.
npm install --save rough-notation
Install wrapper.
npm install --save ngx-rough-notation
Import wrapper module into your app mobule
import { RoughNotationModule } from 'ngx-rough-notation';
<rough-notation type="underline" [show]="true">
Hello I am a notation
</rough-notation>
This is a mandatory field. It sets the annotation style. Following are the list of supported annotation types:
- underline: This style creates a sketchy underline below an element.
- box: This style draws a box around the element.
- circle: This style draws a circle around the element.
- highlight: This style creates a highlight effect as if marked by a highlighter.
- strike-through: This style draws horizontal lines through the element.
- crossed-off: This style draws an 'X' across the element.
Boolean property to turn on/off animation when annotating. Default value is true
.
Duration of the animation in milliseconds. Default is 800ms
.
String value representing the color of the annotation sketch. Default value is currentColor
.
Width of the annotation strokes. Default value is 1
.
Padding between the element and roughly where the annotation is drawn. Default value is 5
(in pixels).
If you wish to specify different top
, left
, right
, bottom
paddings, you can set the value to an array akin to CSS style padidng [top, right, bottom, left]
or just [top & bottom, left & right]
.
This property only applies to inline text. To annotate multiline text (each line separately), set this property to true
.
By default annotations are drawn in two iterations, e.g. when underlining, drawing from left to right and then back from right to left. Setting this property can let you configure the number of iterations.
Value could be a string or an array of strings, each string being one of these values: left, right, top, bottom. When drawing a bracket, this configures which side(s) of the element to bracket. Default value is right
.
This boolean value hide/show the annotation. By default set to false
.
This is a wrapper for multiple annotations, it will trigger the show()
method on every child annotation.
<rough-notation-group [show]="true">
<rough-notation type="circle" color="#f57f17">
Circle
</rough-notation>
<rough-notation type="highlight" color="#fff176">
Highlight
</rough-notation>
</rough-notation-group>
This boolean value hide/show the annotations. By default set to false
.
- Testing