Install & Download:
Description:
A cross-platform iOS style slide to unlock component for NativeScript-Vue.
How to use it:
1. Import and register the slide to unlock component.
import Vue from 'nativescript-vue' import UnlockSlider from '@nativescript-community/ui-vue-unlock-slider'
Vue.use(UnlockSlider);
2. Add the slide to unlock component to the app.
<UnlockSlider ref="unlockSlider" @change="sliderChange" />
export default {
data() {
return {
slidePercent: 0
}
},
methods: {
sliderChange(percent) {
this.slidePercent = percent;
},
reset() {
this.$refs.unlockSlider.reset();
}
}
}3. Default component props.
height: {
type: Number,
default: 70,
},
radius: {
type: Number,
default: 70,
},
containerBackgroundColor: {
type: String,
default: "lightgray",
},
buttonText: {
type: String,
default: "→",
},
buttonTextSize: {
type: Number,
default: 20,
},
buttonTextColor: {
type: String,
default: "black",
},
buttonTextFontWeight: {
type: String,
default: "normal",
},
buttonBackgroundColor: {
type: String,
default: "white",
},
infoText: {
type: String,
default: "Slide to unlock",
},
infoTextSize: {
type: Number,
default: 16,
},
infoTextColor: {
type: String,
default: "black",
},Preview:
