Skip to content

TColorCheck / 颜色选择器(色块预设)

ColorCheck provides preset color swatches for selection. Supports single/multiple selection, rounded swatches, light mode, and color format conversion. / 色块预设选择器提供预设色块供选择,支持单选/多选、圆角色块、浅色模式和颜色格式转换。

Props / 属性

PropType / 类型Default / 默认值Description / 说明
colorstring'#066fd1'Default color
colorsColorCheckOption[]Color swatch list
multiplebooleanfalseMulti-select
roundedbooleanfalseRounded swatches
disabledbooleanfalseDisabled

Basic Usage / 基础用法

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

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

<template>
  <TColorCheck v-model="color" />
</template>

Tips / 避坑指南

  • Uses colord library for color parsing and format conversion
  • multiple=true changes v-model to array of selected colors
  • Default colors are the 12 Tabler brand colors if not specified