Closed ichavchavadze closed 10 months ago
You just need to set the closeButton
option to true to display the close button. And if you want it to say "Cancel" instead of "Close" then change it with the closeLabel
option.
You just need to set the
closeButton
option to true to display the close button. And if you want it to say "Cancel" instead of "Close" then change it with thecloseLabel
option.
But I want all three buttons at the same time - reset, cancel, close, is it possible?
It is not possible to have all three buttons out of the box, but you can add it yourself with a little Javascript and CSS. Try this:
Coloris.ready(() => {
const picker = document.getElementById('clr-picker');
const button = document.createElement('button');
picker.appendChild(button);
button.setAttribute('type', 'button');
button.classList.add('clr-custom-reset');
button.textContent = 'Reset';
button.addEventListener('click', () => {
Coloris.close(true);
});
});
And to style the new button:
.clr-custom-reset {
order: 2;
height: 24px;
margin: 0 20px 20px 0;
padding: 0 20px;
border: 0;
border-radius: 12px;
color: #fff;
background-color: #666;
font-family: inherit;
font-size: 12px;
font-weight: 400;
cursor: pointer;
}
Thanks! This is exactly what I wanted.
If you want to add content over the color area, you will have to call Coloris.updatePosition()
after.
Is it possible to add an extra button? I need a 'cancel' button that will do
Coloris.close(true);