iOS Style Segmented Control Component For Vue

Install & Download:

# Yarn
$ yarn add vue-ios13-segmented-control
# NPM
$ npm i vue-ios13-segmented-control

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: