Updateing Docs
This commit is contained in:
@@ -8,11 +8,32 @@ Color picker component with preset color palette, reactive value binding, and cu
|
||||
|
||||
## 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) |
|
||||
| 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 (Tailwind + custom styling) |
|
||||
|
||||
## Styling
|
||||
|
||||
Colorpicker is a custom component built with Tailwind CSS. The button supports standard **daisyUI Button classes** for consistent styling:
|
||||
|
||||
| Category | Keywords | Description |
|
||||
| :--- | :--- | :--- |
|
||||
| Size | `btn-xs`, `btn-sm`, `btn-md`, `btn-lg` | Button scale |
|
||||
| Style | `btn-outline`, `btn-soft`, `btn-ghost` | Visual style variants |
|
||||
|
||||
> For further details, check the [daisyUI Button Documentation](https://daisyui.com/components/button) – The color picker button accepts standard button styling classes.
|
||||
|
||||
### Example
|
||||
|
||||
```javascript
|
||||
Colorpicker({
|
||||
class: "btn-outline btn-sm",
|
||||
label: "Pick color",
|
||||
value: selectedColor
|
||||
});
|
||||
```
|
||||
|
||||
## Live Examples
|
||||
|
||||
@@ -56,10 +77,10 @@ const PreviewDemo = () => {
|
||||
value: color
|
||||
}),
|
||||
Div({
|
||||
class: 'w-full h-20 rounded-lg shadow-inner transition-all duration-200',
|
||||
class: 'w-full h-20 rounded-lg shadow-inner transition-all duration-200 flex items-center justify-center',
|
||||
style: () => `background-color: ${color()}`
|
||||
}, [
|
||||
Div({ class: 'text-center leading-20 pt-6 opacity-70' }, () => color())
|
||||
Div({ class: 'text-center font-mono text-sm bg-black/20 px-2 py-1 rounded' }, () => color())
|
||||
])
|
||||
]);
|
||||
};
|
||||
@@ -196,187 +217,19 @@ const DynamicDemo = () => {
|
||||
]),
|
||||
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`
|
||||
class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold text-white',
|
||||
style: () => `background-color: ${primary()}`
|
||||
}, 'Primary'),
|
||||
Div({
|
||||
class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold',
|
||||
style: () => `background-color: ${secondary()}; color: white`
|
||||
class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold text-white',
|
||||
style: () => `background-color: ${secondary()}`
|
||||
}, 'Secondary'),
|
||||
Div({
|
||||
class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold',
|
||||
style: () => `background-color: ${accent()}; color: white`
|
||||
class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold text-white',
|
||||
style: () => `background-color: ${accent()}`
|
||||
}, 'Accent')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(DynamicDemo, '#demo-dynamic');
|
||||
```
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const initColorpickerExamples = () => {
|
||||
|
||||
// 1. Basic Colorpicker
|
||||
const basicTarget = document.querySelector('#demo-basic');
|
||||
if (basicTarget && !basicTarget.hasChildNodes()) {
|
||||
const BasicDemo = () => {
|
||||
const color = $('#3b82f6');
|
||||
return Colorpicker({
|
||||
label: 'Pick a color',
|
||||
value: color
|
||||
});
|
||||
};
|
||||
$mount(BasicDemo, basicTarget);
|
||||
}
|
||||
|
||||
// 2. With Reactive Preview
|
||||
const previewTarget = document.querySelector('#demo-preview');
|
||||
if (previewTarget && !previewTarget.hasChildNodes()) {
|
||||
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 flex items-center justify-center',
|
||||
style: () => `background-color: ${color()}`
|
||||
}, [
|
||||
Div({ class: 'text-center font-mono text-sm bg-black/20 px-2 py-1 rounded' }, () => color())
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(PreviewDemo, previewTarget);
|
||||
}
|
||||
|
||||
// 3. Color Palette Grid
|
||||
const paletteTarget = document.querySelector('#demo-palette');
|
||||
if (paletteTarget && !paletteTarget.hasChildNodes()) {
|
||||
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, paletteTarget);
|
||||
}
|
||||
|
||||
// 4. With Text Color Preview
|
||||
const textTarget = document.querySelector('#demo-text');
|
||||
if (textTarget && !textTarget.hasChildNodes()) {
|
||||
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, textTarget);
|
||||
}
|
||||
|
||||
// 5. All Variants
|
||||
const variantsTarget = document.querySelector('#demo-variants');
|
||||
if (variantsTarget && !variantsTarget.hasChildNodes()) {
|
||||
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, variantsTarget);
|
||||
}
|
||||
|
||||
// 6. Dynamic Color Swatch
|
||||
const dynamicTarget = document.querySelector('#demo-dynamic');
|
||||
if (dynamicTarget && !dynamicTarget.hasChildNodes()) {
|
||||
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 text-white',
|
||||
style: () => `background-color: ${primary()}`
|
||||
}, 'Primary'),
|
||||
Div({
|
||||
class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold text-white',
|
||||
style: () => `background-color: ${secondary()}`
|
||||
}, 'Secondary'),
|
||||
Div({
|
||||
class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold text-white',
|
||||
style: () => `background-color: ${accent()}`
|
||||
}, 'Accent')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(DynamicDemo, dynamicTarget);
|
||||
}
|
||||
};
|
||||
|
||||
initColorpickerExamples();
|
||||
|
||||
if (window.$docsify) {
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
||||
hook.doneEach(initColorpickerExamples);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
```
|
||||
Reference in New Issue
Block a user