Repository files navigation

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

Live demo ›

npm i vue-ios13-segmented-control

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

importiOS13SegmentedControlfrom"@/vue-ios13-segmented-control.vue";exportdefault{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>

You'll needNPM and theVue CLI.

npm install npm run serve

You'll need to installRollup.js to run the build script.Install it withnpm install --g rollup

npm run build

Running the build script generatemain (.ssr.js),module (.esm.js), andunpkg (.min.js) versions in thedist directory.

Publish with:

npm run buildnpm publish

• Styles based onthis repo by@laurasandoval

• The component development template I used isvue-sfc-rollup byTeam Innovation

• "iOS 13" is trademark by Apple Inc.

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