https://github.com/SamuelTrottier/vue-wheel-select

https://github.com/SamuelTrottier/vue-wheel-select

Last synced: 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/SamuelTrottier/vue-wheel-select
• Owner: SamuelTrottier
• License: mit
• Created: 2019-08-24T20:58:02.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-11T03:22:11.000Z (over 1 year ago)
• Last Synced: 2024-03-23T21:42:59.045Z (3 months ago)
• Language: Vue
• Size: 2.48 MB
• Stars: 10
• Watchers: 1
• Forks: 3
• Open Issues: 19
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-vue - @SamuelTrottier/vue-wheel-select - A simple scrolling select component. (Components & Libraries / UI Components)
• awesome-vue - @SamuelTrottier/vue-wheel-select - A simple scrolling select component. (Components & Libraries / UI Components)
• awesome-vue - @SamuelTrottier/vue-wheel-select - A simple scrolling select component. (Components & Libraries / UI Components)
• awesome-vue - @SamuelTrottier/vue-wheel-select - A simple scrolling select component. (Components & Libraries / UI Components)
• awesome-vue - @SamuelTrottier/vue-wheel-select - A simple scrolling select component. (Components & Libraries / UI Components)
• awesome-vue - @SamuelTrottier/vue-wheel-select - A simple scrolling select component. (Components & Libraries / UI Components)
• awesome-vue - @SamuelTrottier/vue-wheel-select - A simple scrolling select component. (Components & Libraries / UI Components)
• awesome-vue - @SamuelTrottier/vue-wheel-select - A simple scrolling select component. (Components & Libraries / UI Components)
• awesome-vue - @SamuelTrottier/vue-wheel-select - A simple scrolling select component. (Components & Libraries / UI Components)
• awesome-vue - @SamuelTrottier/vue-wheel-select - Millions of developers and companies build, ship, and maintain their software on GitHub — the largest and most advanced development platform in the world. (UI Components [🔝](#readme))
• awesome-vue - @SamuelTrottier/vue-wheel-select - A simple scrolling select component. (Components & Libraries / UI Components)

README

        
# vue-wheel-select

A simple scrolling select and touch compatible component.

**[DEMO](https://SamuelTrottier.github.io/vue-wheel-select/)**

## Installation

```bash

# npm

npm install vue-wheel-select --save

# Yarn

yarn add vue-wheel-select

```

## Usage

#### Minimal example

```html

  


    

  


  import VueWheelSelect from 'vue-wheel-select';

  export default {

    data () {

      return {

        selectedBrand: null,

        brands: [

          'Scarpa',

          'Black Diamond',

          'La Sportiva',

          'Tenaya',

          'Five Ten',

          'Mad Rock',

          'Evolv',

          'Red Chili',

        ],

      }

    },

    components: {

      VueWheelSelect

    }

  }

```

## Available props

The component accepts these props:

| Attribute        | Type                                            | Default              | Description      |

| :---             | :---:                                           | :---:                | :---             |

| v-model / value  | Any              | Set or Get selected value (required) |

| options           | Array                                          | `null`       | Select options (required)  s|

| optionHeight           | Number                                    | 48  | Height of a single selectable item |

| getOptionLabel | Function | Returns the option | Function called to display the label of each options |

| getOptionKey | Function | Returns the option | Function called to set the option key |

| allowNullSelection | Boolean | false | Add a null option |

| nullSelectionMessage | String | 'Select an option' | Text to display for the null option |