Home

Awesome

Vanilla Rough Notation

npm version

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

PropertyAttributeTypeDefault
animationDurationanimationDurationnumber800
annotationannotationRoughAnnotation | undefined
colorcolorstring"currentColor"
noAnimationnoAnimationbooleanfalse
orderordernumber0
paddingpaddingnumber5
showOnLoadshowOnLoadbooleanfalse
strokeWidthstrokeWidthnumber1
typetypeRoughAnnotationType"underline"
multilinemultilinebooleantrue
bracketsbrackets`StringArray<String>`
iterationsiterationsnumber2

Methods

MethodType
hide(): void
isShowing(): boolean
remove(): void
show(): void

rough-notation-group

Properties

PropertyAttributeTypeDefault
annotationElementsannotationElementsWcRoughNotation[][]
showOnLoadshowOnLoadbooleanfalse

Methods

MethodType
show(): void