1.4.0 • Published 3 months ago
@cloudparker/easy-color-picker-svelte v1.4.0
easy-color-picker
Implement this simple and lightweight color picker specifically for Svelte without any dependencies, maintaining a small package footprint. Easily obtain the color value by utilizing the on:change event for the picker. Simply add it to any component. It will work well on mobile devices also.
Install
npm install @cloudparker/easy-color-picker-svelte --save-dev
Screenshot
Sample
<script lang="ts">
import EasyColorPicker from '@cloudparker/easy-color-picker-svelte';
const handleColor = (ev: CustomEvent) => {
let color = ev.detail;
console.log(color);
};
</script>
<EasyColorPicker
on:color={handleColorChange}
rgbaFormat={false}
colorPalletes={['#f57f17', '#00c853', '#00bfa5', '#2962ff']}
/>
Demo
NA
Props
color: string
default: #0000ff Bind the color value in hex format.
rgbaFormat: boolean
default: false Enable this when the rgba color value required, by default the color picker return hex color value.
colorPalletes: string[]
Set colors for quick access, can set max 4 colors into it.
Events
on:color
Tigger with the color value rgba
or hex
format when color chnaged.