comes in two flavours - As a framework-agnostic web component, and as a Vue component with minimal overhead.
npm install dv-scalebar69kB (26kB gzip). The Vue version, on the other hand, can only be used in
51kB (20kB gzip) and is more
26kB (9kB gzip) for the Lit version and 9kB (3kB gzip) for the
sh
$ npm install dv-scalebar
`
$3
The Lit version of the component is highly versatile and can be used in various environments; with or without a framework, and with or without a bundler. Typically, you only need to import the component in JavaScript...
` JS
import "dv-scalebar/lit"
`
...and then use it in the HTML.
` HTML
`
$3
In Vue, the use of Single File Components (SFCs, or .vue files) is quite common. To use dv-scalebar in an SFC, import it in the
#### Reactivity
The following example demonstrates the binding of reactive variables to attributes of the scalebar component in Vue:
` Vue
`
The use of multiple attributes in the above example can be simplified with v-bind like so...
` Vue
`
... or even with a single reactive configuration object:
` Vue
`
Usage
This page demonstrates some basic attributes that can be used to modify the scalebar component. For more detailed examples, refer to the sections in the side navigation.
$3
Without any attributes, the scalebar renders as a simple grayscale gradient.
Code
`html{4}
`
Results
$3
The scalebar can be enhanced with basic attributes such as colors, labels, ticks, and classes, as well as layout properties like vertical, reverse, and before/after.
Code
`html{4}
`
Results
$3
Code
`html{4}
`
Results
$3
Code
`html{4}
`
Results
$3
Code
`html{4}
`
Results
$3
Code
`html{4}
``