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.vue
<script setup>
  import { ColorBoard } from "@svar-ui/vue-core";
</script>
  • apply the <ColorBoard> tag to initialize a color board:
App.vue
<template>
  <ColorBoard />
</template>

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 setup>
  import { ref } from "vue";
  import { ColorBoard } from "@svar-ui/vue-core";

  const color = ref(null);
</script>
  • bind the variable to the value property of the control:
<ColorBoard v-model:value="color" />

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 setup>
    import { ColorBoard } from "@svar-ui/vue-core";

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

<template>
  <ColorBoard button :onchange="handleChange"/>
</template>

The handler function of the change event takes the HEX code of the newly selected color.

Styling a color board​

You can apply custom styles to ColorBoard by providing a CSS class name via the css property and defining the desired styles in a <style> block:

<div class="demo-box">
  <ColorBoard css="my-class" />
</div>

<style scoped>
  .demo-box :global(.my-class) {
    background-color: gold;
  }
</style>

Vue scoped styles apply only to the current component's elements. Use :global() to target elements inside SVAR controls. To make the selector more specific, include the HTML tag name before the class.