开发预览更新于 2026-05-10

ColorSwatch 颜色块

单个颜色样本，常用于调色板。支持选中环、新增按钮变体。

基础用法

任意 CSS 颜色（含 token var(--accent-1)）。selected 显示选中环，add 切换为虚线 + 加号占位。

背景

src/App.vue

<script setup lang="ts">
import { ref } from 'vue';
import { CfColorSwatch } from '@chufix-design/vue';
const picked = ref('var(--accent-1)');
const colors = ['var(--accent-1)', 'var(--status-success)', 'var(--status-warning)', 'var(--status-error)', 'var(--proto-ws)', 'var(--proto-gql)'];
</script>
<template>
  <div class="demo-row">
    <CfColorSwatch
      v-for="c in colors"
      :key="c"
      :color="c"
      :selected="picked === c"
      :label="c"
      @click="picked = c"
    />
    <CfColorSwatch add label="添加颜色" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfColorSwatch } from '@chufix-design/vue';
const picked = ref('var(--accent-1)');
const colors = ['var(--accent-1)', 'var(--status-success)', 'var(--status-warning)', 'var(--status-error)', 'var(--proto-ws)', 'var(--proto-gql)'];
</script>
<template>
  <div class="demo-row">
    <CfColorSwatch
      v-for="c in colors"
      :key="c"
      :color="c"
      :selected="picked === c"
      :label="c"
      @click="picked = c"
    />
    <CfColorSwatch add label="添加颜色" />
  </div>
</template>

import { CfColorSwatch } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfColorSwatch color="var(--accent-1)" selected />
      <CfColorSwatch color="var(--status-success)" />
      <CfColorSwatch color="#dc3545" />
      <CfColorSwatch add label="添加颜色" />
    </>
  );
}

尺寸 / 形状 / 状态

3 档尺寸，square / round 两种形状，可选中、可禁用。

背景

src/App.vue

<script setup lang="ts">
import { CfColorSwatch } from '@chufix-design/vue';
const c = 'var(--accent-1)';
</script>
<template>
  <div class="demo-row" style="align-items: center; gap: 16px;">
    <CfColorSwatch size="sm" :color="c" />
    <CfColorSwatch size="md" :color="c" />
    <CfColorSwatch size="lg" :color="c" />
    <span style="width: 1px; height: 24px; background: var(--line-1); margin: 0 4px;" />
    <CfColorSwatch size="md" shape="round" :color="c" />
    <CfColorSwatch size="lg" shape="round" :color="c" />
    <span style="width: 1px; height: 24px; background: var(--line-1); margin: 0 4px;" />
    <CfColorSwatch :color="c" :selected="true" />
    <CfColorSwatch :color="c" disabled />
  </div>
</template>

<script setup>
import { CfColorSwatch } from '@chufix-design/vue';
const c = 'var(--accent-1)';
</script>
<template>
  <div class="demo-row" style="align-items: center; gap: 16px;">
    <CfColorSwatch size="sm" :color="c" />
    <CfColorSwatch size="md" :color="c" />
    <CfColorSwatch size="lg" :color="c" />
    <span style="width: 1px; height: 24px; background: var(--line-1); margin: 0 4px;" />
    <CfColorSwatch size="md" shape="round" :color="c" />
    <CfColorSwatch size="lg" shape="round" :color="c" />
    <span style="width: 1px; height: 24px; background: var(--line-1); margin: 0 4px;" />
    <CfColorSwatch :color="c" :selected="true" />
    <CfColorSwatch :color="c" disabled />
  </div>
</template>

import { CfColorSwatch } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfColorSwatch size="sm" color="var(--accent-1)" />
      <CfColorSwatch size="md" color="var(--accent-1)" />
      <CfColorSwatch size="lg" color="var(--accent-1)" />
      <CfColorSwatch shape="round" color="var(--accent-1)" />
      <CfColorSwatch selected color="var(--accent-1)" />
      <CfColorSwatch disabled color="var(--accent-1)" />
    </>
  );
}

API

属性	类型	默认值	说明
`color`	`string`	—	任意 CSS 颜色或 token
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	18 / 24 / 32 px
`shape`	`'square' \| 'round'`	`'square'`
`selected`	`boolean`	`false`	选中环
`add`	`boolean`	`false`	新增占位（虚线 + 加号）
`disabled`	`boolean`	`false`
`label`	`string`	—	自定义 aria-label