https://github.com/matsuuu/vanilla-rough-notation
A Vanilla JS Web Component implementation of the Rough Notation library
https://github.com/matsuuu/vanilla-rough-notation
javascript webcomponent
Last synced: about 2 months ago
JSON representation
A Vanilla JS Web Component implementation of the Rough Notation library
- Host: GitHub
- URL: https://github.com/matsuuu/vanilla-rough-notation
- Owner: Matsuuu
- License: mit
- Created: 2020-05-30T17:21:57.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T07:27:35.000Z (over 2 years ago)
- Last Synced: 2025-04-12T02:06:27.734Z (about 2 months ago)
- Topics: javascript, webcomponent
- Language: JavaScript
- Homepage:
- Size: 771 KB
- Stars: 17
- Watchers: 2
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vanilla Rough Notation
[](https://badge.fury.io/js/vanilla-rough-notation)
A Vanilla Web Component port of the popular [Rough Notation](https://github.com/pshihn/rough-notation) library.
[CodeSandbox](https://codesandbox.io/embed/dark-tdd-nkvbl?fontsize=14&hidenavigation=1&theme=dark)
[Demo page, if CodeSandbox is not working](https://matsuuu.github.io/vanilla-rough-notation/)
For more documentation about animation types and more, visit the [official repo](https://github.com/pshihn/rough-notation)
### Usage
```js
import 'vanilla-rough-notation';
```
```html
WC Rough Notation
```
##### Groups
```html
Rough notation group
By wrapping multiple rough notation elements into a group,
you can show them in animating in order
```
## 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` | "right" |
| `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` |