I'm trying to get the color value to my variable fld.color, the below code didnt work, please help how to achieve this
<List>
{#each fields as fld, i}
<ListInput
type="colorpicker"
label={fld.label}
placeholder="Color"
readonly
value={fld.color}
colorPickerParams={{ modules: ['palette'], openIn: 'auto', openInPhone: 'sheet', palette: palette, formatValue(value) {
return value.hex;
} }}
colorPickerChange={e=>fld.color=e.target.value }>
</ListInput>
{/each}
</List>
should be:
colorPickerChange={ value => fld.color= value.hex }
its not working
I tried to console.log on colorPickerChange, the event is not getting fired when we pick color
<List>
<ListInput
type="colorpicker"
label="Pick color"
placeholder="Pick color"
readonly
value={{ hex: '#00ffff' }}
colorPickerParams={{ modules: ['palette'], openIn: 'auto', openInPhone: 'sheet', palette: palette, formatValue(value) {
return value.hex;
} }}
colorPickerChange={ value => console.log('sdsd')}>
</ListInput>
</List>
I’m using this in production and it works pretty good:
let themeColorInt = {rgb:[parseInt(tmp[0]),parseInt(tmp[1]),parseInt(tmp[2])]}
...
...
...
<ListInput
onChange={e=>themeColor = e.target.value}
type="colorpicker"
label="Primary color"
placeholder="Primary color"
readonly
value={themeColorInt}
colorPickerParams={{
modules: ['initial-current-colors', 'rgb-sliders'],
sliderValue: true,
sliderLabel: true,
formatValue(value) {
return `rgb(${value.rgb.join(', ')})`;
},
}}
/>
I’m using rgb but it should work the same for hex values, if not, just throw a debugger;
in your js script or @debug
in your html/svelte markup and you should be able to find out where any complaints come from regarding the color format.
If you’re still unsure, the documentation says:
If
type="colorpicker"
then value must be passed as what Color Picker accepts - Object with colors, for examplevalue={{hex: '#ff0000'}}
and color picker accepts these: https://framework7.io/docs/color-picker.html#color-picker-value
Nonetheless, even if you don’t get that part to work, all it means is that the color picker won’t be able to initialize a specific color you chose, but it should still work once you try change the value using the ui.
Hope this helps.