Skip to content

TColorPicker / 色彩选择器

ColorPicker provides a full color picking experience with a popover panel. Supports alpha channel, predefined colors, multiple format output, and label display. / 色彩选择器通过弹出面板提供完整的颜色选取体验,支持 Alpha 通道、预设色、多格式输出和标签展示。

Props / 属性

PropType / 类型Default / 默认值Description / 说明
colorFormat'hex' | '#hex' | 'rgb' | 'hsv' | 'hsl''#hex'Output format
showAlphabooleanfalseShow alpha slider
predefinestring[]Preset colors
disabledbooleanfalseDisabled
showValuebooleantrueShow color value text
size'sm' | 'md' | 'lg''md'Input size
labelstringLabel text

Basic Usage / 基础用法

vue
<script setup lang="ts">
import { TColorPicker } from '@gulcc/tabler-vue'

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

<template>
  <TColorPicker v-model="color" label="Pick color / 选择颜色" />
</template>