12 KiB
12 KiB
Colorpicker
Color picker component with preset color palette, reactive value binding, and customizable appearance.
Tag
Colorpicker
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label |
string |
- |
Label text for the button |
value |
string | Signal<string> |
'#000000' |
Selected color value (hex format) |
class |
string |
'' |
Additional CSS classes (DaisyUI + Tailwind) |
Live Examples
Basic Colorpicker
Live Demo
const BasicDemo = () => {
const color = $('#3b82f6');
return Colorpicker({
label: 'Pick a color',
value: color
});
};
Mount(BasicDemo, '#demo-basic');
With Reactive Preview
Live Demo
const PreviewDemo = () => {
const color = $('#10b981');
return Div({ class: 'flex flex-col gap-4 w-full' }, [
Colorpicker({
label: 'Choose color',
value: color
}),
Div({
class: 'w-full h-20 rounded-lg shadow-inner transition-all duration-200',
style: () => `background-color: ${color()}`
}, [
Div({ class: 'text-center leading-20 pt-6 opacity-70' }, () => color())
])
]);
};
Mount(PreviewDemo, '#demo-preview');
Color Palette Grid
Live Demo
const PaletteDemo = () => {
const selectedColor = $('#ef4444');
const presets = [
'#ef4444', '#f97316', '#f59e0b', '#eab308',
'#84cc16', '#10b981', '#14b8a6', '#06b6d4',
'#3b82f6', '#6366f1', '#8b5cf6', '#d946ef',
'#ec489a', '#f43f5e', '#6b7280', '#1f2937'
];
return Div({ class: 'flex flex-col gap-4' }, [
Colorpicker({
label: 'Custom color',
value: selectedColor
}),
Div({ class: 'divider text-xs' }, 'Or choose from palette'),
Div({ class: 'grid grid-cols-8 gap-2' }, presets.map(color =>
Button({
class: `w-8 h-8 rounded-lg shadow-sm transition-transform hover:scale-110`,
style: `background-color: ${color}`,
onclick: () => selectedColor(color)
})
)),
Div({ class: 'mt-2 text-center text-sm font-mono' }, () => selectedColor())
]);
};
Mount(PaletteDemo, '#demo-palette');
With Text Color Preview
Live Demo
const TextDemo = () => {
const bgColor = $('#1e293b');
const textColor = $('#f8fafc');
return Div({ class: 'flex flex-col gap-4 w-full' }, [
Div({ class: 'flex gap-4' }, [
Colorpicker({
label: 'Background',
value: bgColor
}),
Colorpicker({
label: 'Text',
value: textColor
})
]),
Div({
class: 'p-6 rounded-lg text-center font-bold transition-all duration-200',
style: () => `background-color: ${bgColor()}; color: ${textColor()}`
}, [
'Preview text with your colors'
])
]);
};
Mount(TextDemo, '#demo-text');
All Variants
Live Demo
const VariantsDemo = () => {
return Div({ class: 'flex flex-wrap gap-4 items-center' }, [
Colorpicker({
label: 'Primary',
value: $('#3b82f6')
}),
Colorpicker({
label: 'Success',
value: $('#10b981')
}),
Colorpicker({
label: 'Warning',
value: $('#f59e0b')
}),
Colorpicker({
label: 'Error',
value: $('#ef4444')
})
]);
};
Mount(VariantsDemo, '#demo-variants');
Dynamic Color Swatch
Live Demo
const DynamicDemo = () => {
const primary = $('#3b82f6');
const secondary = $('#ef4444');
const accent = $('#10b981');
return Div({ class: 'flex flex-col gap-4 w-full' }, [
Div({ class: 'flex flex-wrap gap-4' }, [
Colorpicker({ label: 'Primary', value: primary }),
Colorpicker({ label: 'Secondary', value: secondary }),
Colorpicker({ label: 'Accent', value: accent })
]),
Div({ class: 'grid grid-cols-3 gap-2 mt-2' }, [
Div({
class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold',
style: () => `background-color: ${primary()}; color: white`
}, 'Primary'),
Div({
class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold',
style: () => `background-color: ${secondary()}; color: white`
}, 'Secondary'),
Div({
class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold',
style: () => `background-color: ${accent()}; color: white`
}, 'Accent')
])
]);
};
Mount(DynamicDemo, '#demo-dynamic');