Mode and value in Vue Color picker component
11 Jun 20244 minutes to read
Rendering palette at initial load
By default, the Picker
area will be rendered at initial load. To render the Palette area while opening the ColorPicker pop-up, and specify the mode
property as Palette
.
In the following sample, it will render the Palette
at initial load.
<template>
<div class='wrap'>
<h4>Choose Color</h4>
<ejs-colorpicker mode="Palette"></ejs-colorpicker>
</div>
</template>
<script setup>
import { ColorPickerComponent as EjsColorpicker } from '@syncfusion/ej2-vue-inputs';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
.wrap {
margin: 0 auto;
width: 300px;
text-align: center;
}
</style>
<template>
<div class='wrap'>
<h4>Choose Color</h4>
<ejs-colorpicker mode="Palette"></ejs-colorpicker>
</div>
</template>
<script>
import { ColorPickerComponent } from '@syncfusion/ej2-vue-inputs';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
export default {
name: "App",
components: {
"ejs-colorpicker": ColorPickerComponent
}
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
.wrap {
margin: 0 auto;
width: 300px;
text-align: center;
}
</style>
Color value
The value
property can be used to specify the color value to the ColorPicker. It supports either three
or six
digit hex codes. To include opacity
, set the color value as four
or eight
digit hex code.
In the following sample, the color value sets as four
digit hex code, the last digit represents the opacity
value.
<template>
<div class='wrap'>
<h4>Choose Color</h4>
<ejs-colorpicker value="035a" :modeSwitcher="false"></ejs-colorpicker>
</div>
</template>
<script setup>
import { ColorPickerComponent as EjsColorpicker} from '@syncfusion/ej2-vue-inputs';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
.wrap {
margin: 0 auto;
width: 300px;
text-align: center;
}
</style>
<template>
<div class='wrap'>
<h4>Choose Color</h4>
<ejs-colorpicker value="035a" :modeSwitcher="false"></ejs-colorpicker>
</div>
</template>
<script>
import { ColorPickerComponent } from '@syncfusion/ej2-vue-inputs';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
export default {
name: "App",
components: {
"ejs-colorpicker": ColorPickerComponent,
}
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
.wrap {
margin: 0 auto;
width: 300px;
text-align: center;
}
</style>
The
value
property supports hex code with or without#
prefix.