analyzeplatypus/vue-ios13-segmented-control

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

iOS 13 Segmented Control for Vue

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

Live demo ›

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

• Styles based on this repo by @laurasandoval

• The component development template I used is vue-sfc-rollup by Team Innovation

• "iOS 13" is trademark by Apple Inc.

Other

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

vue-ios13-segmented-control's Issues

Changing colors and font-size of texts.

I think it would be extremely useful if there is a feature that allows users of this package to change the colors, the font-size of texts, and background colors on each segment.