add a README
This commit is contained in:
parent
2a63b777f7
commit
4d4157aa72
102
README.mkd
Normal file
102
README.mkd
Normal file
@ -0,0 +1,102 @@
|
|||||||
|
# vue-svg-pan-zoom : Vue component for SVG-Pan-Zoom
|
||||||
|
|
||||||
|
This module is a very simple [Vue][] component providing the
|
||||||
|
goodness of [SVG-Pan-Zoom][] for SVG elements.
|
||||||
|
|
||||||
|
/!\ WARNING: the module is young, basic, and likely to have
|
||||||
|
bugs. Use at your own risk, send patches for my eternal gratitude.
|
||||||
|
|
||||||
|
## Basic Use
|
||||||
|
|
||||||
|
In a Single File Component:
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<SvgPanZoom
|
||||||
|
style="width: 500px; height: 500px; border:1px solid black;"
|
||||||
|
:zoomEnabled="true"
|
||||||
|
:controlIconsEnabled="true"
|
||||||
|
:fit="false"
|
||||||
|
:center="true"
|
||||||
|
>
|
||||||
|
<svg>
|
||||||
|
<circle x="10" y="10" r="5" />
|
||||||
|
</svg>
|
||||||
|
</SvgPanZoom>`
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import SvgPanZoom from 'vue-svg-pan-zoom';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: { SvgPanZoom },
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
### Notes
|
||||||
|
|
||||||
|
* currently the `SvgPanZoom` component only works with a `svg` child -- `embed` won't work.
|
||||||
|
|
||||||
|
* `SvgPanZoom` accepts as attributes all `svg-pan-zoom` options:
|
||||||
|
|
||||||
|
| attribute | default |
|
||||||
|
| --------- | -------- |
|
||||||
|
|zoomEnabled | true |
|
||||||
|
|controlIconsEnabled | false |
|
||||||
|
|fit | true |
|
||||||
|
|panEnabled | true |
|
||||||
|
|dblClickZoomEnabled | true |
|
||||||
|
|mouseWheelZoomEnabled | true |
|
||||||
|
|preventMouseEventsDefault |true |
|
||||||
|
|contain | false |
|
||||||
|
|center | true |
|
||||||
|
|viewportSelector | .svg-pan-zoom_viewport |
|
||||||
|
|zoomScaleSensitivity | 0.2 |
|
||||||
|
|minZoom | 0.5 |
|
||||||
|
|maxZoom | 10 |
|
||||||
|
|refreshRate | auto |
|
||||||
|
|beforeZoom | |
|
||||||
|
|onZoom | |
|
||||||
|
|beforePan | |
|
||||||
|
|onPan | |
|
||||||
|
|onUpdatedCTM | |
|
||||||
|
|customEventsHandler | |
|
||||||
|
|eventsListenerElement | |
|
||||||
|
|
||||||
|
## Use with thumbnails
|
||||||
|
|
||||||
|
In a Single File Component:
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<SvgPanZoom
|
||||||
|
style="width: 300px; height: 500px; border:1px solid black; "
|
||||||
|
>
|
||||||
|
<svg> ... </svg>
|
||||||
|
<SvgPanZoomThumbnail>
|
||||||
|
<svg> ... </svg>
|
||||||
|
</SvgPanZoomThumbnail>
|
||||||
|
</SvgPanZoom>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { SvgPanZoom, SvgPanZoomThumbnail } from 'vue-svg-pan-zoom';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: { SvgPanZoom, SvgPanZoomThumbnail },
|
||||||
|
};
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
### Notes
|
||||||
|
|
||||||
|
* Just like the `SvgPanZoom`component, `SvgPanZoomThumbnail` only accepts
|
||||||
|
a `svg` child -- `embed` won't work.
|
||||||
|
|
||||||
|
### Storybook demos
|
||||||
|
|
||||||
|
To run [Storybook][] stories duplicating the demos of
|
||||||
|
the main `SVG-Pan-Zoom` project, do
|
||||||
|
|
||||||
|
$ yarn install --dev
|
||||||
|
$ yarn storybook
|
||||||
|
|
Loading…
Reference in New Issue
Block a user