iOS Style Segmented Control Component For Vue

Description:

A Vue component to create a dynamic segmented control as you have seen in iOS.

How to use it:

1. Import and register the segmented control component.

import iOS13SegmentedControl from "@/vue-ios13-segmented-control.vue";
export default {
  name: 'MyComponent',
  components: { 
    "ios13-segmented-control": iOS13SegmentedControl
  }
  // ...
};

2. Add the segmented control to the app.

<ios13-segmented-control v-model="value" :segments="segments"/>

3. Available component props.

value: {
  required: true,
  type: [Number, String]
},
segments: {
  required: true,
  type: Array
},
elementName: {
  type: String,
  required: false,
  default: () => '' + getRandomInt(100000)
}

Preview:

iOS Style Segmented Control Component For Vue

Download Details:

Author: AnalyzePlatypus

Live Demo: https://vue-ios13-segmented-control.netlify.app/

Download Link: https://github.com/AnalyzePlatypus/vue-ios13-segmented-control/archive/refs/heads/master.zip

Official Website: https://github.com/AnalyzePlatypus/vue-ios13-segmented-control

Install & Download:

# Yarn
$ yarn add vue-ios13-segmented-control

# NPM
$ npm i vue-ios13-segmented-control

You Might Be Interested In:

Add Comment