花色选取器

美丽的花朵花朵 网络取色器。 作为独立的"香草"JS类,或作为一薄回放/Vue/Svelte/Angular包装.

https://github.com/user-attachments/assets/553ee0ff-1f52-497f-bc8f-cee9a7b91d66 页面存档备份,存于互联网档案馆

软件包

安装

# Vanilla JS (core)
npm install @dayflow/blossom-color-picker

# React
npm install @dayflow/blossom-color-picker-react

# Vue 3
npm install @dayflow/blossom-color-picker-vue

# Svelte
npm install @dayflow/blossom-color-picker-svelte

# Angular
npm install @dayflow/blossom-color-picker-angular

使用量

香草联署材料

import { BlossomColorPicker } from '@dayflow/blossom-color-picker';
import '@dayflow/blossom-color-picker/styles.css';

const picker = new BlossomColorPicker(document.getElementById('picker'), {
  onChange: color => console.log(color.hex),
});

// Programmatic control
picker.expand();
picker.collapse();
picker.toggle();
picker.setValue({ hue: 200, saturation: 50, alpha: 100, layer: 'outer' });
picker.setOptions({ disabled: true });
picker.destroy();

反应

import { BlossomColorPicker } from '@dayflow/blossom-color-picker-react';

function App() {
  const [color, setColor] = useState({
    hue: 330,
    saturation: 70,
    alpha: 100,
    layer: 'outer' as const,
  });

  return <BlossomColorPicker value={color} onChange={c => setColor(c)} />;
}

第3组

<script setup>
import { ref } from 'vue';
import { BlossomColorPicker } from '@dayflow/blossom-color-picker-vue';

const color = ref({
  hue: 330,
  saturation: 70,
  alpha: 100,
  layer: 'outer',
});

function handleChange(c) {
  color.value = c;
}
</script>

<template>
  <BlossomColorPicker :value="color" @change="handleChange" />
</template>

丝绒

<script>
  import { BlossomColorPicker } from '@dayflow/blossom-color-picker-svelte';

  let color = $state({
    hue: 330, saturation: 70, alpha: 100, layer: 'outer',
  });

  function handleChange(newColor) {
    color = newColor;
  }
</script>

<BlossomColorPicker value={color} onchange={handleChange} />

角质

import { Component } from '@angular/core';
import {
  BlossomColorPickerComponent,
  type BlossomColorPickerColor,
} from '@dayflow/blossom-color-picker-angular';

@Component({
  selector: 'app-root',
  imports: [BlossomColorPickerComponent],
  template: `
    <blossom-color-picker
      [value]="color"
      (colorChange)="onColorChange($event)"
    />
  `,
})
export class App {
  color = { hue: 330, saturation: 70, alpha: 100, layer: 'outer' as const };

  onColorChange(c: BlossomColorPickerColor) {
    this.color = c;
  }
}

选项/ 道具

所有软件包共享相同的一组选项. 在反应中,它们作为JSX道具被传递;在Vue作为组件道具被传递(与事件通过 @change 编号 : @collapse);在斯维尔特语中作为回调道具(Svelte)onchange 编号 : oncollapse; 以角为单位 @Input() 绑定( 通过 (colorChange) 编号 : (colorCollapse)) (中文(简体) ).

CSS 变量

把这些放在 .bcp-root 或任何以取取者为主题的祖先. 每一个都回到默认的外观,所以让它们未设置会改变什么.

.my-dark-theme .bcp-root {
  --bcp-surface: #1e1b2e;
  --bcp-core-bg: #1e1b2e;
  --bcp-track: rgba(255, 255, 255, 0.12);
  --bcp-handle-border: #1e1b2e;
  --bcp-focus-ring-gap: #1e1b2e;
}

香草联署材料方法

核心类暴露出这些额外的方法:

特征

智能移位器和可适应UI

取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取 何时 adaptivePositioning 启用 :

• 查看端口移动:如果被扩展的拾取器会溢出屏幕边缘(在移动上常见),它会自动转向视图.
• 自动滑动器定位: Arc滑块会自动移动到最可用的空间(Top, Bottom, Left, or Right)的一侧.
• 暗模式准备: 背景会自动适应您的主题, 使用当前所选颜色的软而有锡的覆盖 .

几何叠接

我们的"Bloom"算法使用三角计算来保证:

• 零差距: Petals 积极"拥抱" 核心和巢穴深入到前几层的"valleys".
• 错位布局:相邻地层自动交错以产生密集而自然的花卉效应而不论颜色计数.

类型参考

BlossomColorPickerValue

用于被控制/不受控制状态的值对象 .

BlossomColorPickerColor

扩展 BlossomColorPickerValue ——归来 onChange 财务报告和审定财务报表 onCollapse。 。 。 .

ColorInput

type ColorInput = string | { h: number; s: number; l: number };

颜色格式

这个 colors 选项接受以下任何一种格式,它们可以混合:

// Vanilla JS
const picker = new BlossomColorPicker(el, {
  colors: [
    '#FF6B6B', // hex
    'rgb(107, 203, 119)', // rgb()
    'rgba(65, 105, 225, 0.9)', // rgba()
    'hsl(280, 70%, 55%)', // hsl()
    'hsl(200 80% 60%)', // hsl() space-separated
    { h: 45, s: 90, l: 65 }, // HSL object
  ],
});

// React
<BlossomColorPicker
  colors={['#FF6B6B', 'rgb(107, 203, 119)', { h: 45, s: 90, l: 65 }]}
/>

项目结构

这是一个单曲,有五个包:

packages/
  core/      @dayflow/blossom-color-picker          — standalone vanilla JS class
  react/     @dayflow/blossom-color-picker-react     — thin React wrapper
  vue/       @dayflow/blossom-color-picker-vue       — thin Vue 3 wrapper
  svelte/    @dayflow/blossom-color-picker-svelte    — thin Svelte 5 wrapper
  angular/   @dayflow/blossom-color-picker-angular   — thin Angular wrapper

React,Vue,Svelte和Angular适配器是轻量级包装器(~2 KB各一),将核心实例挂入容器元素并同步框架道具/活动.

由 贾斯李从 @lichinlin (英语)。 。 。 .

键盘交互和状态相容性

Tab在一个可聚焦的花瓣上进入花瓣组. 向左/向右方向逆时针移动/向右方向移动在当前环中; 向上向下移动, 选择最近的角位置 。 Enter/Space 选择焦点花瓣. 逃出会关闭可折叠取出器并恢复触发焦点. 一个选手 collapsible: false 保持开放.

阴影滑动器暴露 role="slider" 及其当前值。 箭头键修改为 1, Shift+Arrow 和 PageUp/PageDown 修改为 10; Home/End 选择 0/100. 增加阴影会变暗. onChange 互动期间运行; onChangeComplete 运行一次在指针放出/取消,或按键放出/blur上,并带有最后拟议颜色. 已取消的指针手势保留了最后的更改 。 在没有变化或拾取器被销毁时,没有释放完成.

在受控模式下,花瓣和花荫相互作用只能通过回调来提议颜色. 提供已接受的价值 setValue 或者说 setOptions({ value })。通过 setOptions({ value: undefined }) 返回到无控制模式,同时保留当前接受的值.

为了兼容性, value.saturation 仍然存储 阴影位置,而不是 HSL 饱和度. originalSaturation 存储花瓣的 HSL 饱和度. showAlphaSlider 仍为阴影弧的变质名称; 使用 showShadeSlider 在新代码。 取花者保留了明确供应的 alpha 没有不透明控制; 使用 ChromePicker 因为它的不透明滑道。 默认的α现在为100(opaque);通过50明确保留了之前的半透明默认.