花色选取器

美丽的花朵花朵 网络取色器。 作为独立的"香草"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)) (中文(简体) ).

香草联署材料方法

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

特征

智能移位器和可适应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 (英语)。 。 。 .