vanilla-rough-notation
vanilla-rough-notation copied to clipboard
Published
20 hours ago •
Matsuuu
Matsuuu
A Vanilla JS Web Component implementation of the Rough Notation library
Vanilla Rough Notation
A Vanilla Web Component port of the popular Rough Notation library.
Demo page, if CodeSandbox is not working
For more documentation about animation types and more, visit the official repo
Usage
import 'vanilla-rough-notation';
<rough-notation showOnLoad type="highlight" color="#FF6d00">
<h2>WC Rough Notation</h2>
</rough-notation>
Groups
<rough-notation-group id="group-to-show">
<rough-notation type="highlight" color="lightyellow" order="3">
<h2>Rough notation group</h2>
</rough-notation>
<rough-notation type="underline" color="green" order="1">
<p>By wrapping multiple rough notation elements into a group,</p>
</rough-notation>
<rough-notation order="2">
<p>you can show them in animating in order</p>
</rough-notation>
</rough-notation-group>
rough-notation
Properties
| Property | Attribute | Type | Default |
|---|---|---|---|
animationDuration |
animationDuration |
number |
800 |
annotation |
annotation |
RoughAnnotation | undefined |
|
color |
color |
string |
"currentColor" |
noAnimation |
noAnimation |
boolean |
false |
order |
order |
number |
0 |
padding |
padding |
number |
5 |
showOnLoad |
showOnLoad |
boolean |
false |
strokeWidth |
strokeWidth |
number |
1 |
type |
type |
RoughAnnotationType |
"underline" |
multiline |
multiline |
boolean |
true |
brackets |
brackets |
`String | Array<String>` |
iterations |
iterations |
number |
2 |
Methods
| Method | Type |
|---|---|
hide |
(): void |
isShowing |
(): boolean |
remove |
(): void |
show |
(): void |
rough-notation-group
Properties
| Property | Attribute | Type | Default |
|---|---|---|---|
annotationElements |
annotationElements |
WcRoughNotation[] |
[] |
showOnLoad |
showOnLoad |
boolean |
false |
Methods
| Method | Type |
|---|---|
show |
(): void |
Matsuuu