https://github.com/matsuuu/wc-rough-notation
A Web Component port of the popular Rough Notation library
https://github.com/matsuuu/wc-rough-notation
Last synced: 2 months ago
JSON representation
A Web Component port of the popular Rough Notation library
- Host: GitHub
- URL: https://github.com/matsuuu/wc-rough-notation
- Owner: Matsuuu
- License: mit
- Created: 2020-05-29T12:25:59.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T07:21:29.000Z (over 2 years ago)
- Last Synced: 2025-02-02T00:46:54.439Z (4 months ago)
- Language: TypeScript
- Size: 1.29 MB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# WC Rough Notation
A Web Component port of the popular [Rough Notation](https://github.com/pshihn/rough-notation) libary.
[CodeSandbox](https://codesandbox.io/embed/strange-jang-14utm?fontsize=14&hidenavigation=1&theme=dark)
### Usage
```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
```
## wc-rough-notation
### Properties
| Property | Attribute | Type | Default |
| ------------------- | ------------------- | ------------------------------ | -------------- |
| `animationDelay` | `animationDelay` | `number` | 0 |
| `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" |
### Methods
| Method | Type |
| ----------- | ------------- |
| `hide` | `(): void` |
| `isShowing` | `(): boolean` |
| `remove` | `(): void` |
| `show` | `(): void` |
## wc-rough-notation-group
### Properties
| Property | Attribute | Type | Default |
| -------------------- | -------------------- | ------------------- | ------- |
| `annotationElements` | `annotationElements` | `WcRoughNotation[]` | [] |
| `showOnLoad` | `showOnLoad` | `boolean` | false |
### Methods
| Method | Type |
| ------ | ---------- |
| `show` | `(): void` |