Skip to main content

ColorBoard

ColorBoard offers a color palette that provides users with the freedom to choose their desired colors effortlessly. This intuitive tool comes with two convenient usage options: it can be used as a standalone feature, complemented by a dedicated button or in conjunction with ColorPicker for enhanced functionality. The chosen color can be easily selected through the associated configuration property.

ColorBoard

Initialization​

To add a ColorBoard instance into your application, you need to complete two steps:

  • import the source file of the control on a page:
App.svelte
<script>
    import { ColorBoard } from "wx-svelte-core";
</script>
  • apply the <ColorBoard> tag to initialize a color board:
App.svelte
<ColorBoard />

A default color board is initialized with the "#65D3B3" color selected.

Setting the value​

The value of ColorBoard is the Hexadecimal code of a color selected in the control. It is displayed in the text input next to the rectangle selected color. You can specify the selected color as a string via the value property.

<ColorBoard value="#00a037" />

Related sample: ColorPicker

Getting the current value​

You can get the current value of the ColorBoard control. For this, you need to:

  • declare a variable that will contain the control's value (it may contain the initial value):
<script>
    import { ColorBoard } from "wx-svelte-core";

    let color;
</script>
  • bind the variable to the value property of the control:
<ColorBoard bind:value={color} />

If the name of the variable matches its value, you can use the shorthand while binding the property: 

<script>
    import { ColorBoard } from "wx-svelte-core";

    let value;
</script>

<ColorBoard bind:value />

After that the value assigned to the bound variable will be updated on each change of the color.

Related sample: ColorPicker

Adding the "Select" button​

To provide smooth and user-friendly experience during color selection, you can supply ColorBoard with the "Select" button. By default this button is disabled, you can turn it on with the help of the button property.

<ColorBoard value="#65D3B3" button={true}/> <!-- or <ColorBoard value="#65D3B3" button/> -->

ColorBoard button

The "Select" button is useful if you need to catch the change of a color and apply the new color to some element. Read the details below.

Catching the change of the selected color​

In case you need to catch the change of the selected color, you can do it by handling the change event. Inside the event you can get the newly selected color in the following way:

<script>
    import { ColorBoard } from "wx-svelte-core";

    function handleChange(ev) {
        const newColor = ev.detail.value;
        console.log(newColor); 
        // => "#75FFD6"
    }
</script>

<ColorBoard bind:color button on:change={handleChange}/>

The handler function of the change event takes the CustomEvent object as a parameter and returns the HEX code of the newly selected color.

For example, you can catch the change of color selection, specify some element and apply the new color to it by clicking the "Select" button, as shown below:

<script>
    import { ColorBoard } from "wx-svelte-core";

    let color;

    function selectColor(ev) {
        color = ev.detail.value;
    }
</script>

<div style="display: flex; grid-gap: 50px; height: 300px; width: 700px;">
    <div style="background: {color}; height: 220px; width: 200px; border: 1px solid"></div>
    <ColorBoard button on:change={selectColor}/>
</div>