Skip to content

V2 improve build #92

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Dec 13, 2020
Merged

V2 improve build #92

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f8d0ca7
feat: export component in the build
setaman Dec 6, 2020
da8710a
fix!: short component name to ve-progress
setaman Dec 6, 2020
792657e
doc: update initialization guide
setaman Dec 6, 2020
6b6bc8a
doc: update CDN initialization guide
setaman Dec 13, 2020
acd25ad
chore: bump deps
setaman Dec 13, 2020
4a72146
doc: corrections
setaman Dec 13, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 22 additions & 11 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,27 +34,38 @@ Install the library via npm:
```
npm i vue-ellipse-progress
```
The component is provided as a Vue.js plugin. So just initialize it in your ``main.js``:
You can initialize the component globally as a plugin or import it in a specific component of your app.

#### Initialize as Plugin
Import and initialize the component in your `main.js`. After initialization, the component is available as `<ve-progress/>`.
You can also assign a custom name to the component:
```js
import { createApp } from "vue";
import VueEllipseProgress from 'vue-ellipse-progress';
createApp(App).use(VueEllipseProgress);
// createApp(App).use(VueEllipseProgress, "vep"); you can define a name and use the plugin like <vep/>
import veProgress from "vue-ellipse-progress";
createApp(App).use(veProgress);
// createApp(App).use(veProgress, "vep"); define custom name
```

#### Import component
You also have the option to import the component directly:
```js
import { VeProgress } from "vue-ellipse-progress";
```

### CDN
Use this option where you have a global Vue.js instance available. You can customize and get the bundled and minified
You can customize and get the bundled and minified
component from [JSDelivr](https://www.jsdelivr.com/package/npm/vue-ellipse-progress).
Just add the following line to your HTML and start using the component, nothing more is required:

Just add the following line to your HTML and initialize the component as plugin:
```html
<script src="https://cdn.jsdelivr.net/npm/vue-ellipse-progress/dist/vue-ellipse-progress.umd.min.js"></script>
...
createApp(App).use(veprogress);
```

## Usage
After you have initialized the component, use it everywhere you want in your application:
After you have initialized the component, you are ready to create your circles:
```html
<vue-ellipse-progress
<ve-progress
:data="circles"
:progress="progress"
:angle="-90"
Expand Down Expand Up @@ -85,12 +96,12 @@ After you have initialized the component, use it everywhere you want in your app
<span slot="legend-value">/200</span>
<p slot="legend-caption">GOOD JOB</p>

</vue-ellipse-progress>
</ve-progress>
```
## Options
You are ready to go with just following line:
```html
<vue-ellipse-progress :progress="progress"/>
<ve-progress :progress="progress"/>
```
The **[`progress`](#progress)** is the only required property. However, in order to create unique circles that match your design needs, you can use all the properties explained below.

Expand Down
Loading