Awesome

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`