iOS 13 Segmented Control for Vue

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

Live demo ›

!Demo GIF

Install

``bash
npm i vue-ios13-segmented-control
`

Usage

`html

`

`javascript
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"
},
]
};
},

};


`

Live Development

You'll need NPM and the Vue CLI.

`bash
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

* 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`