ColorPicker
This component allows you to select a color .
Example

<template>
<div>
<section>
<server-table-component
data-url="/services"
v-bind="servicesDefinition"
/>
</section>
</div>
</template>;
export default {
name: "App",
data() {
return {
servicesDefinition: {
vtable: {
headers: [
{
text: "Service Id",
value: "service_Id",
align: "left",
render: {
type: ColorPicker,
props: {
isInColumn: true,
locale: locale,
position: "is-bottom-left",
},
events: {
input: this.saveColor,
},
},
sortable: true,
class: "white-space-nowrap",
},
],
},
},
};
},
};
Props
| Name | Description | Type | Required | Default |
|---|---|---|---|---|
| value | - | String | false | null |
| primaryColor | Color primary | String | false | undefined |
| secondaryColor | Color secondary | String | false | undefined |
| horizontal | - | Boolean | false | true |
| labelInside | - | Boolean | false | false |
| labelOnBorder | - | Boolean | false | false |
| mobileModal | - | Boolean | false | true |
| maxHeight | - | Number | false | 1000 |
| isScrollable | - | Boolean | false | true |
| isInColumn | - | Boolean | false | false |
| position | - | String | false | "is-bottom-right" |
| locale | Locale string {en, es ...} for display language on component | String | false | "en" |
Events
| Event Name | Description | Parameters |
|---|---|---|
| input | - | - |