# vue-segmented-control

> Segmented control for Vue.js

Latest version **1.0.0** (published 2018-07-10) · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install vue-segmented-control
pnpm add vue-segmented-control
yarn add vue-segmented-control
bun add vue-segmented-control
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2018-07-10 |
| First published | 2018-06-29 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 10.6 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | pandazaur |
| Keywords | vue, vuejs, vue.js, segmented, control, segmented-control |

## Links

- npm: https://www.npmjs.com/package/vue-segmented-control
- npm.io page: https://npm.io/package/vue-segmented-control

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^2.5.16

## Recent versions

- 1.0.0 (latest) — 2018-07-10
- 0.1.2 — 2018-06-29
- 0.1.0 — 2018-06-29

## README

# Vue Segmented-Control
Segmented control for Vue.js

![Vue Segmented Control visual](https://raw.githubusercontent.com/Pandazaur/vue-segmented-control/master/exemple.png)

## Demo

[![Demo on codesandbox.io](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/n4nxjwz17j)

## Installation

```
npm install vue-segmented-control
```

## Usage

```html
<template>
    <segmented-control
        :options="options"
        label="label"
        value="value"
        color="#fff"
        active-color="#333"
        :multiple="false"
        @select="onSelect"
    />
</template>
```
```javascript
import SegmentedControl from 'vue-segmented-control'

export default {
    components: {
        SegmentedControl
    },
    data () {
        return {
            options: [
                { label: 'Red', value: 'red' },
                { label: 'Blue', value: 'blue' },
                { label: 'Green', value: 'green' }
            ]
        }
    },
    methods: {
        onSelect(optionsSelected) {
            // optionSelected: [{ label: '__', value: '__', ... }]
        }
    }
}
```

## Documentation

Props:

| Property | Type | Default | Description | Required |
| ----------- | ----------- | ----------- | ----------- | ----------- |
| options | Array(Object) |  | Items selectables | true
| label   | String | 'label' | Property that define the label |  |
| value   | String | 'value' | Property that define the value (should be unique) |  |
| color   | String | '#fff' | Text color |  |
| activeColor   | String | '#000' | Background color of the selected items | |
| multiple   | Boolean | false | Set to `true` to enable multiple selection | | |

---
_Source: https://npm.io/package/vue-segmented-control · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._