ColorPicker

Pick a color value with a panel and input helpers.

Basic Usage

<template>
  <bp-color-picker v-model="val" valueType="hex"></bp-color-picker>
</template>

<script setup lang="ts">
import { ref } from "vue";
const val = ref("#4695ed");
</script>

Color Format

value-type supports hex and rgb.

HEX format (default)

Current: #165dff

RGB format

Current: rgba(22, 93, 255, 1)

<template>
  <div style="display: flex; gap: 40px">
    <div>
      <div class="label">HEX format (default)</div>
      <bp-color-picker v-model="hexVal" />
      <div class="value">Current: {{ hexVal }}</div>
    </div>
    <div>
      <div class="label">RGB format</div>
      <bp-color-picker v-model="rgbVal" value-type="rgb" />
      <div class="value">Current: {{ rgbVal }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const hexVal = ref("#165dff");
const rgbVal = ref("rgba(22, 93, 255, 1)");
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
.value {
  font-size: 13px;
  color: #4e5969;
  margin-top: 8px;
}
</style>

Size

size supports mini, small, default, and large.

mini

small

default

large

<template>
  <div style="display: flex; gap: 40px; align-items: flex-end">
    <div>
      <div class="label">mini</div>
      <bp-color-picker v-model="val" size="mini" />
    </div>
    <div>
      <div class="label">small</div>
      <bp-color-picker v-model="val" size="small" />
    </div>
    <div>
      <div class="label">default</div>
      <bp-color-picker v-model="val" />
    </div>
    <div>
      <div class="label">large</div>
      <bp-color-picker v-model="val" size="large" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const val = ref("#165dff");
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
</style>

Shape

shape controls the trigger: square (rounded rectangle, default) or circle.

Square

Circle

<template>
  <div style="display: flex; gap: 40px; align-items: flex-end">
    <div>
      <div class="label">Square</div>
      <bp-color-picker v-model="val" shape="square" />
    </div>
    <div>
      <div class="label">Circle</div>
      <bp-color-picker v-model="val" shape="circle" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const val = ref("#165dff");
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
</style>

Show Value

Enable show-value to display the current color value beside the trigger.

Square + value

#165dff

Circle + value

#165dff

<template>
  <div style="display: flex; gap: 40px; align-items: flex-end; flex-wrap: wrap">
    <div>
      <div class="label">Square + value</div>
      <bp-color-picker v-model="val" show-value />
    </div>
    <div>
      <div class="label">Circle + value</div>
      <bp-color-picker v-model="val" shape="circle" show-value />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const val = ref("#165dff");
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
</style>

Disabled

Disable the picker with disabled.

Normal

Disabled

<template>
  <div style="display: flex; gap: 40px">
    <div>
      <div class="label">Normal</div>
      <bp-color-picker v-model="val" />
    </div>
    <div>
      <div class="label">Disabled</div>
      <bp-color-picker v-model="val" disabled />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const val = ref("#86909c");
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
</style>

ColorPicker Props

v-model	Bound value	String	#165dff	-
hide-trigger	Whether to hide the trigger	Boolean	-	-
value-type	Color value type	String	hex	-
size	Size	String	default	-
shape	Trigger shape	ColorPickerShape	square	-
show-value	Whether to show the color value beside the trigger	Boolean	-	-
disabled	Whether disabled	Boolean	-	-