@nextcloud/vue

Appearance

Return to top
On this page

NcColorPicker

Props

Prop nameDescriptionTypeValuesDefault
valueA HEX color that represents the initial value of the pickerstring-
advancedFieldsSet to true to enable advanced fields including HEX, RGB, and HSLboolean-false
paletteProvide a custom array of hexadecimal colors to showarray-() => GenColors(4).map(color => {
return '#' + rgbToHex(color.r) + rgbToHex(color.g) + rgbToHex(color.b)
})

Events

Event namePropertiesDescription
submitEmits a hexadecimal string e.g. '#ffffff'
closeEmitted after picker close
update:open
update:valueEmits a hexadecimal string e.g. '#ffffff'
inputEmits a hexadecimal string e.g. '#ffffff'

Slots

NameDescriptionBindings
default

General description

This component allows the user to choose a color. It consists of 2 actual pickers:

  • One simple picker with a predefined palette of colors;
  • One more advanced picker that provides the full color spectrum;

Usage

  • Using v-model and passing in an HTML element that will be treated as a trigger:
vue
<template>
  <div class="container0">
    <NcColorPicker v-model="color">
      <NcButton> Click Me </NcButton>
    </NcColorPicker>
    <NcColorPicker v-model="color" :palette="customPalette">
      <NcButton> Click Me for a custom palette </NcButton>
    </NcColorPicker>
    <div :style="{ 'background-color': color }" class="color0" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      color: "#0082c9",
      customPalette: [
        "#E40303",
        "#FF8C00",
        "#FFED00",
        "#008026",
        "#24408E",
        "#732982",
        "#5BCEFA",
        "#F5A9B8",
        "#FFFFFF",
        "#F5A9B8",
        "#5BCEFA"
      ]
    };
  }
};
</script>
<style>
.container0 {
  display: flex;
  gap: 20px;
}

.color0 {
  width: 100px;
  height: 40px;
  border-radius: 6px;
}
</style>
  • Using v-bind for both color and open state and emitting an event that updates the color
vue
<template>
  <div class="container1">
    <NcButton @click="open = !open"> Click Me </NcButton>
    <NcColorPicker :value="color" @input="updateColor" :shown.sync="open">
      <div :style="{ 'background-color': color }" class="color1" />
    </NcColorPicker>
  </div>
</template>
<script>
export default {
  data() {
    return {
      color: "#0082c9",
      open: false
    };
  },
  methods: {
    updateColor(e) {
      this.color = e;
    }
  }
};
</script>
<style>
.container1 {
  display: flex;
}

.color1 {
  width: 100px;
  height: 40px;
  margin-left: 20px;
  border-radius: 6px;
}
</style>
  • Using advanced fields including HEX, RGB, and HSL:
vue
<template>
  <div class="container0">
    <NcColorPicker v-model="color" :advanced-fields="true">
      <NcButton> Click Me </NcButton>
    </NcColorPicker>
    <div :style="{ 'background-color': color }" class="color0" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      color: "#0082c9"
    };
  }
};
</script>
<style>
.container0 {
  display: flex;
}

.color0 {
  width: 100px;
  height: 40px;
  margin-left: 20px;
  border-radius: 6px;
}
</style>