iOS Style Slide To Unlock Component For Vue

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:

iOS Style Slide To Unlock Component For Vue

Download Details:

Author: nativescript-community

Live Demo: https://github.com/nativescript-community/ui-vue-unlock-slider

Download Link: https://github.com/nativescript-community/ui-vue-unlock-slider/archive/refs/heads/master.zip

Official Website: https://github.com/nativescript-community/ui-vue-unlock-slider

Install & Download:

Add Comment