Vanilla Rough Notation

A Vanilla Web Component port of the popular Rough Notation library.

CodeSandbox

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`
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