Vue Component Library

Appearance

ColorPicker Component ​

The ColorPicker component provides a user-friendly interface for selecting colors in your application.

Features ​

  • Color selection with hex format output
  • Customizable UI with options to hide/show different parts of the picker
  • Support for color swatches
  • Dropdown positioning that adjusts based on available space
  • Custom formatting through slots
  • Accessibility support

Basic Usage ​

vue
<template>
  <OColorPicker
    :value="selectedColor"
    @onSelectColor="handleColorChange"
  />
</template>

<script setup>
import { ref } from 'vue'

const selectedColor = ref('#4a90e2')

const handleColorChange = (color) => {
  selectedColor.value = color
}
</script>

Dependencies ​

This component requires:

  • Vue 3 with Composition API
  • Vuetify 3 with VColorPicker component

Documentation ​

For more detailed information, check out:

  • API Reference - Detailed props, events, and slots documentation
  • Code - Full component code
  • Demo - Interactive examples and usage patterns