BreezeUI
  • English

    • Color Picker

    An enterprise-level color picker component that supports multiple formats, opacity adjustment, and seamless integration with BrFormItem.

    Component Features

    • 🎨 Multiple Color Formats: Supports HEX, RGB, RGBA, HSL, HSLA color format input and display.
    • 🔘 Alpha Channel: Supports alpha/opacity adjustment.
    • 🎨 Preset Colors: Built-in preset color palette for quick selection.
    • 📐 Inline & Popover: Supports inline display and popover trigger modes.
    • 📝 Form Integration: Supports seamless integration with BrFormItem and vee-validate.
    • 🎨 Theme Customization: Based on BrConfigProvider for global theming and TailwindCSS local overrides.

    Provides basic color selection capabilities.

    <script setup lang="ts">
import { ref } from 'vue'
import { BrColorPicker } from '@breezeui/vue'

const color = ref('#3b82f6')
</script>

<template>
  <BrColorPicker v-model="color" clearable />
</template>

    Preset Colors

    You can provide an array of commonly used preset colors for quick selection.

    <script setup lang="ts">
import { ref } from 'vue'
import { BrColorPicker } from '@breezeui/vue'

const color = ref('#ef4444')
const presets = [
  '#ef4444', '#f97316', '#f59e0b', '#84cc16', 
  '#22c55e', '#10b981', '#14b8a6', '#06b6d4'
]
</script>

<template>
  <BrColorPicker v-model="color" :presets="presets" clearable />
</template>

    Format & Opacity

    Supports opacity adjustment and switching between multiple formats such as hex, rgba, hsla, etc.

    <script setup lang="ts">
import { ref } from 'vue'
import { BrColorPicker } from '@breezeui/vue'

const color = ref('rgba(16, 185, 129, 0.5)')
</script>

<template>
  <BrColorPicker 
    v-model="color" 
    format="rgba" 
    show-alpha 
    clearable 
  />
</template>

    Inline Mode

    In addition to the default popover mode, it also supports displaying the color picker panel directly inline.

    <script setup lang="ts">
import { ref } from 'vue'
import { BrColorPicker } from '@breezeui/vue'

const color = ref('#f59e0b')
</script>

<template>
  <BrColorPicker v-model="color" mode="inline" />
</template>

    Form Integration

    Seamlessly integrates with BrFormItem, supporting color value binding and validation state synchronization.

    <script setup lang="ts">
import { ref } from 'vue'
import { BrForm, BrFormItem, BrColorPicker, BrButton } from '@breezeui/vue'

const formValues = ref({ themeColor: '' })
const formErrors = ref<Record<string, string>>({})

const handleSubmit = () => {
  if (!formValues.value.themeColor) {
    formErrors.value.themeColor = 'Please select a theme color / Please select theme color'
  } else {
    formErrors.value = {}
    alert('Submitted successfully! / Submit successful！')
  }
}
</script>

<template>
  <BrForm class="space-y-4 max-w-sm" @submit="handleSubmit">
    <BrFormItem 
      label="Theme Color" 
      name="themeColor"
      :error-message="formErrors.themeColor"
      :validation-state="formErrors.themeColor ? 'error' : 'default'"
      required
    >
      <BrColorPicker v-model="formValues.themeColor" clearable />
    </BrFormItem>
    <BrButton type="submit">Submit</BrButton>
  </BrForm>
</template>

    Theming

    Combined with BrConfigProvider, you can easily achieve global and local theme style customization.

    <script setup lang="ts">
import { ref } from 'vue'
import { BrConfigProvider, BrColorPicker } from '@breezeui/vue'

const theme = ref({
  primary: '#8b5cf6', // Custom global primary color
  radius: 0.75, // Custom global border radius
})

const color = ref('#3b82f6')
</script>

<template>
  <BrConfigProvider :theme="theme">
    <BrColorPicker v-model="color" />
    
    <BrColorPicker 
      v-model="color" 
      class="border-blue-500 shadow-lg mt-4" 
    />
  </BrConfigProvider>
</template>

    API

    Props

    NameTypeDefaultDescription
    modelValuestringundefinedThe bound color value
    defaultValuestringundefinedThe default color value
    mode'popover' | 'inline''popover'The display mode
    format'hex' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsv''hex'The color format
    showAlphabooleanfalseWhether to show the opacity adjustment slider
    presetsstring[]undefinedAn array of preset colors
    presetColsnumber8The number of columns for the preset color panel
    presetGapnumber | string8The gap between preset colors
    disabledbooleanfalseWhether the color picker is disabled
    readonlybooleanfalseWhether the color picker is readonly
    validationState'success' | 'warning' | 'error' | 'default''default'Validation state (automatically synchronized with form)
    clearablebooleanfalseWhether to show the clear button
    placeholderstring'Select color'The placeholder text

    Emits

    NameParametersDescription
    update:modelValue(value: string | undefined)Triggered when the bound value is updated
    change(value: string | undefined)Triggered when the color changes
    clear()Triggered when the clear button is clicked