A NativeScript-Vue component for “Slide to unlock”

Slide to unlock in iOS style with animations made with NativeScript-Vue. Works on iOS and Android.

Usage

// main.js
import Vue from 'nativescript-vue'
...
+ import UnlockSlider from '@nativescript-community/ui-vue-unlock-slider'
+ Vue.use(UnlockSlider)

<UnlockSlider ref="unlockSlider" @change="sliderChange" />

export default {
  data() {
    return {
      slidePercent: 0
    }
  },
  methods: {
    sliderChange(percent) {
      this.slidePercent = percent;
    },
    reset() {
      this.$refs.unlockSlider.reset();
    }
  }
}

Properties

Name	Type	Default value
height	Number	70
radius	Number	70
containerBackgroundColor	String	lightgray
buttonText	String	→
buttonTextSize	Number	20
buttonTextColor	String	black
buttonTextFontWeight	String	normal
buttonBackgroundColor	String	white
infoText	String	Slide to unlock
infoTextSize	Number	16
infoTextColor	String	black

Events

Name	Type	Value
change	Number	0.00-1.00

GitHub

View Github