Color Picker

fandhe-frontend-pre-styled-ui の color_picker mod が提供するスタイル済み Color Picker 部品です。

Demo

HSV 色相環 + アルファ選択の静的表示です（canvas 非依存、CSS グラデーション + 検証済み割合のみで構成）。ポインタ操作の実配線は wasm 層の後続対応です。

Features

彩度・明度の 2 次元グラデーション（Area）+ 色相/アルファスライダー + HEX 入力からなる複合部品
canvas を使わず、すべて CSS グラデーション + 検証済み整数割合の custom property のみで描画する
開いた状態を固定して掲示する（実際のドラッグ挙動は wasm 層のスコープ外）

Anatomy

content
  area
    area-background
    area-thumb
  hue-slider
    hue-slider-track
    hue-slider-thumb
  alpha-slider
    alpha-slider-track
    alpha-slider-thumb
  control
    channel-input
    value-text

API Reference

Arguments

Name	Type	Description
ColorPicker::from_color	fn(Color) -> ColorPicker	初期色から状態機械を構築する。
channel	Channel	channel_slider が制御するチャンネル（Hue/Alpha）。
attrs	Vec<(&str, &str)>	root パーツへ合成する追加属性。
children	Vec<Node>	root 配下の子ノード（通常 trigger/area を含む）。

Data Attributes

Part	Attribute	Observed Values
content	data-state	closed

CSS Variables

Variable	Default
--fandhe-color-picker-alpha-color	#000
--fandhe-color-picker-hue-color	#ff0000
--fandhe-color-picker-preview	#000
--fandhe-color-picker-thumb-percent	0%
--fandhe-color-picker-x	0%
--fandhe-color-picker-y	0%

Examples

Area + 色相スライダー

彩度・明度のグラデーション領域と色相スライダーを組み合わせます。

Accessibility

WAI-ARIA

Attribute	Description
aria-valuenow	スライダー（thumb）の現在値を支援技術へ伝える。
aria-valuetext	スライダーの現在値の読み上げ用テキスト表現。