svelte-wheel-picker

A customizable and interactive wheel picker component for Svelte applications, inspired by the classic iOS time selector.

Features

• Customizable wheel picker with smooth scrolling and inertia
• Configurable number of visible options and density
• Perspective effect for a 3D wheel appearance
• Hover effects with unwrapping and stamping effect options
• Responsive design with options to fill parent container
• Touch and mouse event support for mobile and desktop
• No dependencies

Installation

npm install svelte-wheel-picker

Basic Usage

<script>
  import WheelPicker from 'svelte-wheel-picker';

  let data = [
    {value: 1, label: "Option 1"},
    {value: 2, label: "Option 2"},
    {value: 3, label: "Option 3"},
    // Add more options as needed
  ];
</script>

<WheelPicker {data} />

Advanced Usage

Customizing Appearance and Behavior

<script>
  import WheelPicker from 'svelte-wheel-picker';

  let data = [
    // Your data array here
  ];

  let options = {
    visibleOptions: 5,
    density: 10,
    perspective: 30,
    friction: 3,
  };

  let rollOnHover = {
    enable: true,
    unwrap: 85,
    stamp: true,
    fixList: false,
    transformSpeed: 0.3
  };

  let fillParent = {
    enable: true
  };
</script>

<WheelPicker 
  {data}
  {options}
  {rollOnHover}
  {fillParent}
  classes="custom-class"
  style="background-color: #f0f0f0;"
/>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | data | Array | [...] | Array of objects with value and label properties | | selectedOption | object | data[0] | Initially selected option | | classes | string | "" | Custom CSS classes | | style | string | "" | Custom inline styles | | options | object | {} | Configuration options for the wheel | | rollOnHover | object | {enable: false} | Configuration for hover effects | | fillParent | object | {enable: false} | Configuration for filling parent container |

options Object Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | visibleOptions | number | 7 | Number of visible options | | density | number | visibleOptions * 2 | Density of options (affects scaling) | | marginY | number | 2 | Vertical margin (in %) | | perspective | number | 0 | Perspective effect (0-180) | | staticPointerTimer | number | 200 | Timer for static pointer (in ms) | | friction | number | 4 | Friction for inertia effect | | overflow | string | "hidden" | Overflow behavior ("hidden" or "visible") |

rollOnHover Object Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | enable | boolean | false | Enable hover effects | | unwrap | number | 85 | Unwrap percentage on hover (0-99) | | stamp | boolean | false | Enable stamping effect | | fixList | boolean | true | Fix list position on hover | | transformSpeed | number | 0.3 | Animation speed for transformations |

fillParent Object Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | enable | boolean | false | Enable filling parent container | | height | string | undefined | Custom height when not filling parent |

Events

The WheelPicker component does not emit custom events, but it updates the selectedOption internally. You can bind to this value to react to changes:

<script lang="ts">
  import WheelPicker from 'svelte-wheel-picker';
  import type {DataOption} from 'svelte-wheel-picker'
  
  let selectedOption:DataOption;
</script>

<WheelPicker bind:selectedOption {...otherProps} />

{#if selectedOption}
  <p>Selected: {selectedOption.label} (Value: {selectedOption.value})</p>
{/if}

Styling

The WheelPicker component uses inline styles for most of its styling needs. You can customize its appearance using the classes and style props, as well as by adjusting the options object.

Browser Compatibility

This component uses modern JavaScript features and CSS properties. Ensure you're using it in a compatible environment or provide appropriate polyfills.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License.

About

Created by um-dev