Skip to content
fandhe-frontend
GitHub

Color Picker

HSV 色相環 + アルファ選択のポップオーバー型入力です。色領域・チャンネルスライダーの見た目は CSS グラデーションと thumb 位置のみで表現し、canvas/web-sys には依存しません（値の算出は決定的な純粋関数が担います）。

fandhe-frontend-headless-ui の color_picker mod が提供する構造・アクセシビリティ（WAI-ARIA・キーボード操作）・表示状態（data-*）のみを持つ unstyled 部品です。Themes 版が備える見た目（実際のグラデーション CSS 等）は持たず、anatomy・ARIA・data-* のみを提供します。CSS は利用者が当てます。

スタイル済みの表示例は Color Picker を参照してください。

関連 API: fandhe-frontend-headless-ui API

Demo

枠線・余白は docs サイト側のデモ枠であり、fandhe-frontend-headless-ui 自体はスタイルを持ちません。

Color

Features

  • root/label/control/trigger/positioner/content/area/area_background/area_thumb/channel_slider(+track/+thumb)/channel_input/value_text/hidden_input の anatomy を持ち、Disclosure（開閉）+ HSV + アルファの値状態機械と組み合わせる（color_picker.rs:1-9）。
  • trigger は type="button" + aria-haspopup="dialog" を固定付与し、controls が Some のとき aria-controls で content と関連付ける（color_picker.rs:219-247）。
  • content（role="dialog"）・area_thumb/channel_slider_thumb（role="slider"）が WAI-ARIA の該当パターンへ従う（color_picker.rs:268-277, 303-330, 351-372）。
  • 色領域・スライダーの見た目は CSS グラデーションと決定的な導出 getter のみで表現し、canvas/web-sys へ一切依存しない（color_picker.rs:11-18）。

Anatomy

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

API Reference

Arguments

NameTypeDefaultDescription
root(state) / trigger(state) / content(state)OpenStateOpenState::Closed開閉状態。data-state・aria-expanded・positioner の hidden 出力の判定に使われる（同じ型のため代表 1 行に集約）。
trigger(controls)Option<&str>NoneSome のとき aria-controls で content と関連付ける（color_picker.rs:241-243）。
area_thumb(hex)&str2 次元 slider（role="slider"）の aria-valuetext。現在色の HEX 正規形（color_picker.rs:303-316）。
channel_slider_thumb(min, max, now)&str, &str, &strWAI-ARIA slider パターンの aria-valuemin/aria-valuemax/aria-valuenow（color_picker.rs:356-372）。
hidden_input(name, value, disabled)&str, &str, boolフォーム送信用の実体（type="hidden"、color_picker.rs:406 以降）。

Data Attributes

PartAttributeObserved Values
contentdata-stateopen
positionerdata-stateopen
rootdata-stateopen
triggerdata-stateopen

Examples

Closed trigger

aria-expanded="false" の閉じた Color Picker trigger/content の例です。

閉じた状態（aria-expanded="false"）の Color Picker trigger/content の組み立て例です。

Accent color

Accessibility

WAI-ARIA

AttributeDescription
aria-haspopup="dialog"trigger パーツへ固定付与する（color_picker.rs:236）。
aria-expandedtrigger の開閉状態（state.is_open()）を反映する（color_picker.rs:237）。
role="dialog"content パーツへ固定付与する（color_picker.rs:277）。
role="slider" / aria-valuetextarea_thumb・channel_slider_thumb の両方が role="slider" を固定付与する（area_thumb は aria-label="Color" + aria-valuetext のみ、channel_slider_thumb は aria-valuemin/max/now も付与、color_picker.rs:303-330, 351-372）。