开发者社区> 镜像站> NPM> @yerkopalma/cursor
@yerkopalma/cursor
Custom cursor component
Last updated 9 months ago by yerkopalma .
MIT · Repository · Original npm · Tarball · package.json
$ cnpm install @yerkopalma/cursor 
SYNC missed versions from official npm registry.

@yerkopalma/cursor

Custom cursor component

Usage

<script>
  import Cursor from '@yerkopalma/cursor'
</script>

<Cursor />

Install

npm install --save-dev @yerkopalma/cursor

API

Cursor component

The default export is the svelte component adding it into your page will affect the your whole site. You can also set the following properties:

  • global: boolean = true => Set to false to change the cursor element only on the parent component.
  • type: ['dot', 'spot', 'ring', 'circle', 'cross', 'minus'] => Predefined types of cursor, defaults to dot.
  • color: string => A valid css color for the cursor.

actions

If you want a different cursor on hover for specific elements, you should use predefined actions on those elements, example:

<script>
import { magneticCursor } from '@yerkopalma/cursor'
</script>

<a use:magneticCursor>magnetic</a>

Availaible actions are:

  • magneticCursor
  • dotCursor
  • crossCursor
  • minusCursor
  • borderCursor

Also, you can define custom actions for custom hovers

TODO: Document custom actions

License

MIT

Current Tags

  • 1.1.2                                ...           latest (9 months ago)

5 Versions

  • 1.1.2                                ...           9 months ago
  • 1.1.1                                ...           9 months ago
  • 1.1.0                                ...           9 months ago
  • 1.0.1                                ...           10 months ago
  • 1.0.0                                ...           10 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (2)
Dependents (0)
None