Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit ca13d5f

Browse files
docs: updated documentation
1 parent 9b22b15 commit ca13d5f

File tree

1 file changed

+103
-60
lines changed

1 file changed

+103
-60
lines changed

‎README.md‎

Lines changed: 103 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,47 @@
11
# 🎉 Vue Cursor Fx
22

3-
> An animated custom cursor effects for interactive elements like navigation - w/ VueJS - SSR Compatible
3+
[![Code Quality][quality-src]][quality-href]
4+
[![Downloads][npm-downloads-src]][npm-downloads-href]
5+
[![Dependencies][dependencies-src]][dependencies-href]
6+
[![Version][npm-version-src]][npm-version-href]
7+
[![Donate][paypal-donate-src]][paypal-donate-href]
8+
9+
[quality-src]: https://img.shields.io/badge/code%20quality-A-informational?style=flat
10+
[quality-href]: https://luxdamore.github.io/vue-cursor-fx/
11+
12+
[npm-downloads-src]: https://img.shields.io/npm/dt/@luxdamore/vue-cursor-fx.svg?style=flat&color=darkgreen
13+
[npm-downloads-href]: https://npmjs.com/package/@luxdamore/vue-cursor-fx
414

5-
[![npm version][npm-version-src]][npm-version-href]
6-
[![npm downloads][npm-downloads-src]][npm-downloads-href]
7-
[![License][license-src]][license-href]
15+
[dependencies-src]: https://img.shields.io/badge/dependencies-up%20to%20date-darkgreen.svg?style=flat
16+
[dependencies-href]: https://npmjs.com/package/@luxdamore/vue-cursor-fx
17+
18+
[npm-version-src]: https://img.shields.io/npm/v/@luxdamore/vue-cursor-fx/latest.svg?style=flat&color=darkorange&label=version
19+
[npm-version-href]: https://npmjs.com/package/@luxdamore/vue-cursor-fx
20+
21+
[paypal-donate-src]: https://img.shields.io/badge/paypal-donate-black.svg?style=flat
22+
[paypal-donate-href]: https://www.paypal.me/luxdamore
23+
[patreon-donate-href]: https://www.patreon.com/luxdamore
24+
[kofi-donate-href]: https://ko-fi.com/luxdamore
25+
26+
> An animated custom cursor effects for interactive elements like navigation - w/ VueJS - SSR Compatible
827
928
## Installation
1029

11-
This package is available on npm.
30+
This package is available on `npm` and `yarn`.
1231

1332
```bash
1433

1534
# Deps
1635
npm install --save @luxdamore/vue-cursor-fx
1736

37+
# Or
38+
yarn add @luxdamore/vue-cursor-fx
39+
1840
```
1941

2042
### Usage
2143

22-
#### As a component
44+
#### As component
2345

2446
```js
2547

@@ -34,8 +56,7 @@ This package is available on npm.
3456
);
3557

3658

37-
// Or
38-
// in a .vue file
59+
// Or, in a .vue file
3960
import { CursorFx } from '@luxdamore/vue-cursor-fx';
4061

4162
export default {
@@ -71,18 +92,18 @@ This package is available on npm.
7192
<html>
7293
<head>
7394

74-
<!-- CursorFx style -->
95+
<!-- CursorFx styles -->
7596

76-
<!-- Old way -->
77-
<link rel="stylesheet" href="https://unpkg.com/@luxdamore/vue-cursor-fx@latest/dist/CursorFx.css" />
78-
<!-- end old way -->
97+
<!-- Old way -->
98+
<link rel="stylesheet" href="https://unpkg.com/@luxdamore/vue-cursor-fx@latest/dist/CursorFx.css" />
99+
<!-- end old way -->
79100

80-
<!-- New way -->
81-
<link rel="preload" href="https://unpkg.com/@luxdamore/vue-cursor-fx@latest/dist/CursorFx.css" as="style" onload="this.rel='stylesheet'" />
82-
<link rel="preload" href="https://unpkg.com/@luxdamore/vue-cursor-fx@latest/dist/CursorFx.umd.min.js" as="script" />
83-
<!-- end new way -->
101+
<!-- New way -->
102+
<link rel="preload" href="https://unpkg.com/@luxdamore/vue-cursor-fx@latest/dist/CursorFx.css" as="style" onload="this.rel='stylesheet'" />
103+
<link rel="preload" href="https://unpkg.com/@luxdamore/vue-cursor-fx@latest/dist/CursorFx.umd.min.js" as="script" />
104+
<!-- end new way -->
84105

85-
<!-- end CursorFx style -->
106+
<!-- end CursorFx styles -->
86107

87108
</head>
88109
<body>
@@ -92,7 +113,7 @@ This package is available on npm.
92113
-->
93114

94115
<!-- CursorFx script -->
95-
<script src="https://unpkg.com/@luxdamore/vue-cursor-fx@latest/dist/CursorFx.umd.min.js"></script>
116+
<script src="https://unpkg.com/@luxdamore/vue-cursor-fx@latest/dist/CursorFx.umd.min.js"></script>
96117
<!-- end CursorFx script -->
97118

98119
</body>
@@ -164,21 +185,21 @@ _N.B.: the cursor is not activated on touchscreen devices._
164185

165186
#### Props
166187

167-
| Attribute | Type | Default | Required | About |
168-
|:--------------------:|--------------------|:-------:|:--------:|-------------------------------------|
169-
| config | Object | {} | false |The default options applied to cursor, see below the `BASE_CONFIG` |
170-
| color | String | #333333 | false |Color for the cursor |
171-
| color-hover | String | #333333 | false |Color, on hover, for the cursor |
172-
| outside-size | String | null | false |The size of outer circle |
173-
| inside-size | String | null | false |The size of inner dot |
174-
| shape | String | null | false |Only available shapes are `circle` and `square` |
175-
| delay | String, Number | 60 | false |Activate cursor after x seconds |
176-
| mix-blend-mode | String | null | false |Set the global `mix-blend-mode` style |
177-
| force-custom-slot | Boolean | false | false |Show or hide the internal default slot |
178-
| allow-on-mobile | Boolean | false | false |Allow the cursor on mobile devices |
179-
| hide-outside | Boolean | false | false |Hide outer circle |
180-
| hide-inside | Boolean | false | false |Hide inner dot |
181-
| disabled | Boolean | false | false |Disable the activation of the cursor |
188+
| Attribute | Type | Default value | About |
189+
|:--------------------:|--------------------|:-------:|-------------------------------------|
190+
| config | Object | {} | The default options applied to cursor, see below the `BASE_CONFIG` |
191+
| color | String | #333333 |Color for the cursor |
192+
| color-hover | String | #333333 | Color, on hover, for the cursor |
193+
| outside-size | String | null | The size of outer circle |
194+
| inside-size | String | null | The size of inner dot |
195+
| shape | String | null | Only available shapes are `circle` and `square` |
196+
| delay | String, Number | 60 | Activate cursor after x seconds |
197+
| mix-blend-mode | String | null | Set the global `mix-blend-mode` style |
198+
| force-custom-slot | Boolean | false | Show or hide the internal default slot |
199+
| allow-on-mobile | Boolean | false | Allow the cursor on mobile devices |
200+
| hide-outside | Boolean | false | Hide outer circle |
201+
| hide-inside | Boolean | false | Hide inner dot |
202+
| disabled | Boolean | false | Disable the activation of the cursor |
182203

183204
```js
184205

@@ -202,10 +223,11 @@ _N.B.: the cursor is not activated on touchscreen devices._
202223

203224
```html
204225

205-
<!-- App.vue -->
226+
<!-- component.vue -->
206227
<template>
207228
<div>
208229

230+
<!-- start it, later -->
209231
<cursor-fx ref="cursor" disabled />
210232

211233
</div>
@@ -216,13 +238,21 @@ _N.B.: the cursor is not activated on touchscreen devices._
216238
export default {
217239
mounted() {
218240
241+
// start it, on mounted, or wherever you want
219242
this.$refs.cursor.start();
220243
221-
// Other methods
222-
// this.$refs.cursor.destroy();
223-
// this.$refs.cursor.refresh();
224-
225244
},
245+
methods: {
246+
others() {
247+
248+
// destroy
249+
this.$refs.cursor.destroy();
250+
251+
//-> refresh automate: `destroy()` and `start()`
252+
this.$refs.cursor.refresh();
253+
254+
},
255+
}
226256
},
227257
</script>
228258

@@ -258,7 +288,9 @@ _N.B.: the cursor is not activated on touchscreen devices._
258288
<template>
259289
<div>
260290

261-
<nuxt />
291+
<main>
292+
<nuxt />
293+
</main>
262294

263295
<cursor-fx />
264296

@@ -269,49 +301,60 @@ _N.B.: the cursor is not activated on touchscreen devices._
269301

270302
___
271303

272-
[npm-version-src]: https://img.shields.io/npm/v/@luxdamore/vue-cursor-fx/latest.svg?style=flat-square
273-
[npm-version-href]: https://npmjs.com/package/@luxdamore/vue-cursor-fx
274-
275-
[npm-downloads-src]: https://img.shields.io/npm/dt/@luxdamore/vue-cursor-fx.svg?style=flat-square
276-
[npm-downloads-href]: https://npmjs.com/package/@luxdamore/vue-cursor-fx
304+
## 👩🏻‍💻👨🏻‍💻 Development
277305

278-
[license-src]: https://img.shields.io/npm/l/@luxdamore/vue-cursor-fx.svg?style=flat-square
279-
[license-href]: https://npmjs.com/package/@luxdamore/vue-cursor-fx
306+
1. **Clone** the repository:
307+
- `git clone https://github.com/LuXDAmore/vue-cursor-fx.git`;
308+
2. **Install** dependencies:
309+
- `yarn install` (or `npm install`);
310+
3. **Start** a development server:
311+
- `yarn dev` (or `npm run dev`);
312+
4. **Extra**, build the documentation ([*Github Pages*](https://pages.github.com/)):
313+
- `yarn build` (or `npm run build`);
314+
- _the content is automatically generated into the `/docs` folder_.
280315

281316
## 🐞 Issues
282317

283-
Please make sure to read the [Issue Reporting Checklist](/.github/ISSUE_TEMPLATE/bug_report.md) before opening an issue. Issues not conforming to the guidelines may be closed immediately.
318+
Please make sure to read the [**issue reporting checklist**](/.github/ISSUE_TEMPLATE/bug_report.md) before opening an issue.
319+
*Issues not conforming to the guidelines may be closed immediately*.
320+
321+
## 📝 Discussions
322+
323+
We're using [**Github discussions**](https://github.com/LuXDAmore/vue-cursor-fx/discussions) as a place to connect with other members of our community.
324+
*You are free to ask questions and share ideas, so enjoy yourself*.
284325

285326
## 👥 Contribution
286327

287-
Please make sure to read the [Contributing Guide](/.github/ISSUE_TEMPLATE/feature_request.md) before making a pull request.
328+
Please make sure to read the [**contributing guide**](/.github/ISSUE_TEMPLATE/feature_request.md) before making a pull request.
288329

289330
## 📖 Changelog
290331

291332
Details changes for each release are documented in the [**release notes**](./CHANGELOG.md).
292333

293-
### 📃 License
334+
### 🆓 License
294335

295-
[MIT License](./LICENSE) // Copyright (©) 2020-present [Luca Iaconelli](https://lucaiaconelli.it)
336+
[MIT License](./LICENSE) // Copyright (©) 2019-now [Luca Iaconelli](https://lucaiaconelli.it)
296337

297-
#### 💸 Are you feeling generous today? :)
338+
#### 💼 Hire me
298339

299-
Do you want to share a beer? We can be good friends.. __[Paypal](https://www.paypal.me/luxdamore) // [Patreon](https://www.patreon.com/luxdamore)__
340+
[![Contacts](https://img.shields.io/badge/Contact%20Me-Let's%20Talk-informational?style=social&logo=minutemailer)](https://lucaiaconelli.it)
300341

301-
> _It's always a good day to be magnanimous - cit_
342+
#### 💸 Are you feeling generous today?
302343

303-
#### 💼 Hire me
344+
If You want to share a beer, we can be really good friends 😄
304345

305-
[![Otechie](https://api.otechie.com/consultancy/luxdamore/badge.svg)](https://otechie.com/luxdamore)
346+
__[Paypal][paypal-donate-href] // [Patreon][patreon-donate-href] // [Ko-fi][kofi-donate-href]__
306347

307-
[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/luxdamore)
348+
> ☀ _It's always a good day to be magnanimous_ - cit.
308349
309-
#### 💘 Inspired by
350+
___
310351

311-
[CustomCursors by Tympanus](https://tympanus.net/Tutorials/CustomCursors/index3.html)
352+
#### 💡 Lighthouse
353+
354+
![Lighthouse audit score](./lighthouse-audit.jpg)
312355

313356
___
314357

315-
##### 💡 Lighthouse
358+
####💘 Inspired by
316359

317-
![Lighthouse audit score](./lighthouse-audit.jpg)
360+
[CustomCursors by Tympanus](https://tympanus.net/Tutorials/CustomCursors/index3.html)

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /