iOS 13 Segmented Control for Vue
A Vue component inspired by the new skeumorphic segmented control in iOS 13.
Install
npm i vue-ios13-segmented-control
Or use the unpkg
CDN:
<script src="https://unpkg.com/vue-ios13-segmented-control@1.0.1/dist/vue-ios13-segmented-control.min.js" integrity="sha384-M63o+KK9pQcShpoV2/YwrXPOoOumiHtXBy+8URwNOQBeNhav4XrDp3uV0+qwmjr8" crossorigin="anonymous"></script>
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.
Thank you
Other
Throughout this package, "iOS 13" is universally spelled as a single word: ios13