Colorpicker
An Input that lets a user specify a color
<template>
<section>
<b-field label="Select a color">
<b-colorpicker value="#7957d5" />
</b-field>
</section>
</template>
# Alpha
<template>
<section>
<b-field>
<div class="control">
<b-switch v-model="alpha">Allow transparent color</b-switch>
</div>
</b-field>
<b-field label="Select a color">
<b-colorpicker v-model="selected" :alpha="alpha" :color-formatter="formatter" />
</b-field>
</section>
</template>
<script>
import Color from '../../../../../src/utils/color'
export default {
data() {
return {
alpha: true,
selected: Color.parse('#48c78eaa')
}
},
methods: {
formatter (color) {
return color.toString(this.alpha ? 'rgba' : 'rgb')
}
}
}
</script>
# Representation
<template>
<section>
<b-field label="Select a color">
<b-colorpicker :value="selected" representation="square" inline/>
</b-field>
</section>
</template>
<script>
import Color from '../../../../../src/utils/color'
export default {
data() {
return {
selected: Color.parse('red')
}
}
}
</script>
<template>
<section>
<b-field label="Select a color">
<b-colorpicker :value="selected" inline horizontal-color-picker>
<template #footer="{ color }">
<div class="colorpicker-fields">
<b-field grouped>
<b-field horizontal label="R">
<b-input
type="number"
v-model.number="color.red"
size="is-small"
aria-label="Red"
min="0"
max="255"
/>
</b-field>
<b-field horizontal label="G">
<b-input
type="number"
v-model.number="color.green"
size="is-small"
aria-label="Green"
min="0"
max="255"
/>
</b-field>
<b-field horizontal label="B">
<b-input
type="number"
v-model.number="color.blue"
size="is-small"
aria-label="Blue"
min="0"
max="255"
/>
</b-field>
</b-field>
<b-field grouped>
<b-field horizontal label="H">
<b-input
type="number"
v-model.number="color.hue"
size="is-small"
aria-label="Hue"
min="0"
max="359"
step="1"
/>
</b-field>
<b-field horizontal label="S">
<b-input
type="number"
:value="Math.round(color.saturation * 100)"
@input="color.saturation = $event / 100"
size="is-small"
aria-label="Saturation"
min="0"
max="100"
step="1"
/>
</b-field>
<b-field horizontal label="L">
<b-input
type="number"
:value="Math.round(color.lightness * 100)"
@input="color.lightness = $event / 100"
size="is-small"
aria-label="Lightness"
min="0"
max="100"
step="1"
/>
</b-field>
</b-field>
</div>
<div class="buttons is-right">
<b-button
label="Clear"
type="is-danger"
size="is-small"
icon-left="close"
outlined
@click="clearColor"
/>
</div>
</template>
</b-colorpicker>
</b-field>
</section>
</template>
<script>
import Color from '../../../../../src/utils/color'
export default {
data() {
return {
selected: Color.parse('cyan')
}
},
methods: {
clearColor () {
this.selected = Color.parse('cyan')
}
}
}
</script>
# Formatter
<template>
<section>
<b-field label="Format">
<b-select v-model="format" placeholder="Select a format">
<option value="hex">Hexadecimal RGB</option>
<option value="hexa">Hexadecimal RGB+A</option>
<option value="rgb">Functional RGB</option>
<option value="rgba">Functional RGB+A</option>
<option value="hsl">Functional HSL</option>
<option value="hsla">Functional HSL+A</option>
</b-select>
</b-field>
<b-field label="Select a color">
<b-colorpicker
v-model="selected"
:color-formatter="formatter"
:alpha="hasAlpha"
expanded
/>
</b-field>
</section>
</template>
<script>
import Color from '../../../../../src/utils/color'
export default {
data() {
return {
format: 'rgb',
selected: Color.parse('#3e8ed0')
}
},
computed: {
hasAlpha() {
return /a\s*$/i.test(this.format)
}
},
methods: {
formatter (color) {
return color.toString(this.format)
}
}
}
</script>
# API
Name | Description | Type | Values | Default |
|---|---|---|---|---|
v-model | Binding value | Object (Color) | — | — |
representation | Representation of Saturation & Lightness values | String | triangle, square | "triangle" |
alpha | Allow color with transparency | Boolean | — | false |
color-formatter | Function to format color to a string for display in the button | Function | — | (color) => color.toString('hex') |
color-parser | Function to parse value to a color | Function | — | (color) => Color.parse(color) |
size | Vertical size of input and picker, optional | String | is-small, is-medium, is-large | — |
inline | Colorpicker is shown inline, button is removed | Boolean | — | false |
position | Optional, position of the colorpicker relative to the button | String | is-top-right, is-top-left, is-bottom-left | Bottom right |
open-on-focus | Open colorpicker on button focus | Boolean | — | false |
focusable | Colorpicker container can be focused | Boolean | — | true |
trap-focus | Trap focus inside the colorpicker. | Boolean | — | true |
close-on-click | Choose whether the Colorpicker should close after selecting a color | Boolean | - | true |
append-to-body | Append colorpicker dropdown to body (prevents event bubbling) | Boolean | — | false |
| Any native attribute | — | — | — | — |
# Variables
You can use these variables to customize this component.
Name | Default |
|---|---|
$colorpicker-radius | $dropdown-content-radius |
$colorpicker-hue-selected-stroke | $primary |
This page is open source. Noticed a typo or something's unclear?