RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/Leecason/vue-rough-notation below:

Leecason/vue-rough-notation: ✏️rough-notation component for @vuejs, support Vue2 & 3.

A Vue wrapper for RoughNotation, a small JavaScript library to create and animate annotations on a web page.

NPM:

npm install --save vue-rough-notation

To make vue-rough-notation work for Vue 2, you need to have @vue/composition-api installed:

npm install --save @vue/composition-api

import { createApp } from 'vue'
import VueRoughNotation from 'vue-rough-notation';

const app = createApp(...);
app.use(VueRoughNotation);

import Vue from 'vue';
import VueCompositionAPI from '@vue/composition-api';
import VueRoughNotation from 'vue-rough-notation';

Vue.use(VueCompositionAPI);
Vue.use(VueRoughNotation);

The default global options are:

{
  // Turn on/off animation when annotating.
  animate: true,
  // Duration of the animation in milliseconds.
  animationDuration: 800,
  // Representing the color of the annotation sketch.
  color: 'currentColor',
  // Width of the annotation strokes.
  strokeWidth: 1,
  // (in pixels) Padding between the element and roughly where the annotation is drawn.
  padding: 5,
  // To annotate multiline text (each line separately), set this property to true.
  multiline: false,
  // By default annotations are drawn in two iterations.
  iterations: 2,
  // When drawing a bracket, this configures which side(s) of the element to bracket.
  brackets: `right`,
}

You can change the options when install:

Vue3

import VueRoughNotation from 'vue-rough-notation';

app.use(VueRoughNotation, options);

Vue2

import VueRoughNotation from 'vue-rough-notation';

Vue.use(VueRoughNotation, options);

<RoughNotation :is-show="isShow" type="underline">
  <span>Rough Notation is awesome</span>
</RoughNotation>

Type: string

required: true

This is a mandatory field. It sets the annotation style. Following are the list of supported annotation types:

underline: This style creates a sketchy underline below an element.
box: This style draws a box around the element.
circle: This style draws a circle around the element.
highlight: This style creates a highlight effect as if marked by a highlighter.
strike-through: This style draws horizontal lines through the element.
crossed-off: This style draws an 'X' across the element.
bracket: This style draws a bracket around an element, usually a paragraph of text. By default on the right side, but can be configured to any or all of left, right, top, bottom.

Type: boolean

Required: false

Default: false

Whether draws the annotation.

Type: boolean

Required: false

Default: true - You can change it when install (see above).

Turn on/off animation when annotating.

Type: number

Required: false

Default: 800 - You can change it when install (see above).

Duration of the animation in milliseconds.

Type: string

Required: false

Default: currentColor - You can change it when install (see above).

Representing the color of the annotation sketch.

Type: number

Required: false

Default: 1 - You can change it when install (see above).

Width of the annotation strokes.

Type: number | number[]

Required: false

Default: 5(in pixels) - You can change it when install (see above)

Padding between the element and roughly where the annotation is drawn. Default value is 5 (in pixels). If you wish to specify different top, left, right, bottom paddings, you can set the value to an array akin to CSS style padding [top, right, bottom, left] or just [top & bottom, left & right].

Type: boolean

Required: false

Default: false

This property only applies to inline text. To annotate multiline text (each line separately), set this property to true.

Type: number

Required: false

Default: 2 - You can change it when install (see above)

By default annotations are drawn in two iterations, e.g. when underlining, drawing from left to right and then back from right to left. Setting this property can let you configure the number of iterations.

Type: string | string[]

Required: false

Default: 'right'

Value could be a string or an array of strings, each string being one of these values: left, right, top, bottom. When drawing a bracket, this configures which side(s) of the element to bracket. Default value is right.

Type: string

Required: false

Default: 'span'

String HTML tag name; if falsy (for example null or undefined), the component will be renderless (the content won't be wrapped in a tag), in this case, only the first child will be rendered

Type: number | string

Required: false

Default: 0

Works with RoughNotationGroup component, order the animation of annotations. When show is called on the group, the annotations are animated in order. For example, an annotation with order 1 will animate before order 2. Also you can pass orderAnnotations prop to RoughNotationGroup to customize the order function.

Parameters: Annotation Object

Called when the component is initialized.

RoughNotationGroup Component

<RoughNotationGroup :is-show="isShow">
  <RoughNotation type="underline">Rough Notation</RoughNotation>
  <RoughNotation type="box">is</RoughNotation>
  <RoughNotation type="highlight">awesome</RoughNotation>
</RoughNotation>

Type: boolean

Required: false

Default: false

Show/Hides the annotations

Type: string

Required: false

Default: 'div'

String HTML tag name; if falsy (for example null or undefined), the component will be renderless (the content won't be wrapped in a tag), in this case, only the first child will be rendered

Type: function

Required: false

Default: (a, b) => a - b

Customize annotations order function. Order will be sorted in ascending order by default.

CONTRIBUTING

MIT

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4