ColorPicker 组件

ColorPicker 组件用于选择颜色，通常用于需要用户选择颜色的场景。

基础用法

使用 ColorPicker 组件时，可以通过 v-model 指令绑定一个颜色值。组件会根据这个值来显示当前选中的颜色。添加circle属性可以改为圆形。指定themeType属性可以动态修改主题色，可取的值为"primary" || "success" || "warning" || "danger" || "info" 。

<script setup>
import { CbButton as Button, CbColorPicker as ColorPicker } from '@ptpchips/carbon-ui'
</script>
<template>
  <div>
    <ClientOnly>
      <div class="theme-picker">普通颜色选择器：<ColorPicker /></div>
      <div class="theme-picker">
        主题色颜色选择器：
        <ColorPicker theme-type="primary" />
        <ColorPicker theme-type="success" circle />
        <ColorPicker theme-type="warning" circle />
        <ColorPicker theme-type="danger" />
        <ColorPicker theme-type="info" circle />
      </div>
    </ClientOnly>
  </div>
  <div class="button-box">
    <div>
      <Button type="primary"> Primary </Button>
      <Button type="success"> Success </Button>
      <Button type="warning"> Warning </Button>
      <Button type="danger"> Danger </Button>
      <Button type="info"> Info </Button>
    </div>
    <div>
      <Button plain type="primary"> Primary </Button>
      <Button plain type="success"> Success </Button>
      <Button plain type="warning"> Warning </Button>
      <Button plain type="danger"> Danger </Button>
      <Button plain type="info"> Info </Button>
    </div>
  </div>
</template>

<style scoped>
.button-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}
.theme-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
</style>