Color Picker

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

Demo

HSV 色相環 + アルファ選択の静的表示です（canvas 非依存、CSS グラデーション + 検証済み割合のみで構成）。ポインタ操作の実配線は wasm 層の後続対応です。閉状態の trigger（通常 / disabled / readonly・invalid・required）と、開状態の content（hue/alpha スライダーに data-channel/data-orientation 付き）を並べています。

Color

Color (disabled)

Color (readonly/invalid)

Features

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

Anatomy

root
  label
  control
    channel-input
    trigger
    hidden-input
content
  area
    area-background
    area-thumb
  hue-slider
    hue-slider-track
    hue-slider-thumb
  alpha-slider
    alpha-slider-track
    alpha-slider-thumb
    value-text

API Reference

Arguments

Name	Type	Default	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
`alpha-slider`	`data-channel`	`alpha`
`alpha-slider`	`data-orientation`	`horizontal`
`alpha-slider-thumb`	`data-channel`	`alpha`
`alpha-slider-thumb`	`data-orientation`	`horizontal`
`alpha-slider-track`	`data-channel`	`alpha`
`alpha-slider-track`	`data-orientation`	`horizontal`
`channel-input`	`data-channel`	`hex`
`channel-input`	`data-disabled`	（値なし）
`channel-input`	`data-invalid`	（値なし）
`channel-input`	`data-readonly`	（値なし）
`content`	`data-state`	`closed`
`control`	`data-disabled`	（値なし）
`control`	`data-invalid`	（値なし）
`control`	`data-readonly`	（値なし）
`control`	`data-state`	`closed`
`hue-slider`	`data-channel`	`hue`
`hue-slider`	`data-orientation`	`horizontal`
`hue-slider-thumb`	`data-channel`	`hue`
`hue-slider-thumb`	`data-orientation`	`horizontal`
`hue-slider-track`	`data-channel`	`hue`
`hue-slider-track`	`data-orientation`	`horizontal`
`label`	`data-disabled`	（値なし）
`label`	`data-invalid`	（値なし）
`label`	`data-readonly`	（値なし）
`label`	`data-required`	（値なし）
`root`	`data-disabled`	（値なし）
`root`	`data-invalid`	（値なし）
`root`	`data-readonly`	（値なし）
`root`	`data-state`	`closed`
`trigger`	`data-disabled`	（値なし）
`trigger`	`data-state`	`closed`

CSS Variables

Variable	Default
`--fandhe-color-picker-alpha-color`	`#000`
`--fandhe-color-picker-hue-color`	`#ff0000`
`--fandhe-color-picker-preview`	`transparent`
`--fandhe-color-picker-thumb-percent`	`0%`
`--fandhe-color-picker-thumb-size`	`1rem`
`--fandhe-color-picker-trigger-size`	`var(--fandhe-size-control-height-md, 2.5rem)`
`--fandhe-color-picker-x`	`0%`
`--fandhe-color-picker-y`	`0%`

Examples

Area + 色相スライダー

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

Accessibility

WAI-ARIA

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