0.1.0 • Published 4 years ago
@kisstar/slide-unlock v0.1.0
slide-unlock

A JavaScript library that provides sliding unlocking.
Usage
Provide an HTML element as the mount point:
<div id="slider-container"></div>Introduce scripts and styles, and then create slider applications:
import SlideUnlock from '@kisstar/slide-unlock';
// You can also directly import SCSS files to create different themes
// The example here imports CSS files directly
import '@kisstar/slide-unlock/dist/slide-unlock.css';
const slideUnlock = new SlideUnlock({
// Options
});
slideUnlock.init();
slideUnlock.mount('#slider-container');Options
| Configuration item | Type | Explain | Default |
|---|---|---|---|
| width | string | Slider width. | '100%' |
| height | string | Slider height. | '100%' |
| placeholder | string | Placeholder for slider. | 'Please drag the slider to the right' |
| message | string | Text displayed after unlocking. | 'Unlock succeeded' |
| success | Function | Callback after unlocking. | |
| prefix | string | Prefix for all styles. | 'ks' |
| duration | number | Transition time for slider reset. | 500ms |
Development scripts
# runs the app in the development mode
npm start
# verify the code format and syntax in the project
npm run lint
# write a more friendly commit message
npm run commitLicense
MIT