Skip to content

Vue.js radio button component inspired by the new skeuomorphic segmented control in iOS 13

Notifications You must be signed in to change notification settings

AnalyzePlatypus/vue-ios13-segmented-control

Repository files navigation

iOS 13 Segmented Control for Vue

A Vue component inspired by the new skeumorphic segmented control in iOS 13.

Live demo ›

Demo GIF

Install

npm i vue-ios13-segmented-control

Usage

<ios13-segmented-control v-model="value" :segments="segments"/>
import iOS13SegmentedControl from "@/vue-ios13-segmented-control.vue";

export default {
  name: 'MyComponent',
  components: { 
    "ios13-segmented-control": iOS13SegmentedControl
  }
  data() {
    return {
      value: "42",
      segments: [
        {
          title: "Apple Music",
          id: "0"
        },
        {
          title: "Spotify",
          id: "1"
        },
        {
          title: "Deezer",
          id: "2"
        },
      ]
    };
  },
  
};
</script>

Live Development

You'll need NPM and the Vue CLI.

npm install 
npm run serve

Building

You'll need to install Rollup.js to run the build script. Install it with npm install --g rollup

npm run build

Running the build script generate main (.ssr.js), module (.esm.js), and unpkg (.min.js) versions in the dist directory.

Publish with:

npm run build
npm publish

Thank you

Other

Throughout this package, "iOS 13" is universally spelled as a single word: ios13

About

Vue.js radio button component inspired by the new skeuomorphic segmented control in iOS 13

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published