| Props | Type | Default | Description |
|---|---|---|---|
items |
String[] |
["yes", "no", "maybe"] |
pass an array to populate wheel segments with custom items to documentation inside the README |
size |
Number |
400 |
pass a number for the size of the wheel, aspect ratio is 1 |
colors |
String[] |
[randomly generated === items.length] |
pass an array of strings representing the colors you would like to override wheel segments. this prop is experimental |
textColor |
String |
"white" |
pass a color to override the color of wheel segments' text to documentation inside the README |
pointerColor |
String |
"black" |
pass a string for the color of the pointer you want |
pointerSize |
Number |
size / 8 |
pass a number to size the pointer in px to the center of the wheel, by default this will be 1/8 of the wheel size |
pointerTextColor |
String |
"white" |
pass a string to set text color inside pointer |
Svelte Custom Roulette
Custom Wheel Roulette Picker
Svelte-Custom-Roulette
As of 6/16/23 this Library is release (v0.1.1). It is stable and can accept props, however, custom labels need to be rotated. published npm package
Installation
$ npm i svelte-custom-roulette
Quick Start
<script>
import { Wheel } from "svelte-custom-roulette";
const items = [
"item 1",
"item 2",
"item 3",
]
</script>
<Wheel
{items}
size={800}
textColor="black"
pointerColor="purple"
pointerSize={60}
/>
API
Contribute
The JoCo team warmly welcomes contributions to all of our Open Source projects. Svelte-Custom-Roulette's contribution protocol is as follows:- Star and Fork the repository
- Create a feature branch
- We are fans of Angular Git Commit Protocol so please, loosely, follow this structure; including header & body syntax including scope and files changed inside your commit message
- Submit your Pull Request
License
Svelte Custom Roulette is MIT licensed. Please propogate within whatever circumstances you wish.Top categories
Need a Svelte website built?
Hire a professional Svelte developer today.