フォーム v1.0.0

カラーピッカー

色相/彩度パッド、スライダー、プリセットスウォッチ、hex/rgb入力を備えたカラー選択入力。 アルファチャンネルとコンパクトなポップオーバーモードに対応。ドラッグ可能な彩度/明度キャンバス、 色相レインボースライダー、オプションのアルファスライダー、手動hex入力、クリック可能な プリセットカラースウォッチを含みます。スタンドアロンまたはコンパクトモードで動作します。

プレビュー & コード

オプション

名前 型 デフォルト 説明
value String "#3b82f6" Initial hex color value
label String nil Label text displayed above the picker
hint String nil Help text displayed below the picker
swatches Array [] Array of hex color strings for preset swatches. Defaults to a built-in palette when empty.
format Symbol :hex Output format: :hex, :rgb, or :hsl
alpha Boolean false Show alpha/opacity slider
show_input Boolean true Show text input for manual hex entry
disabled Boolean false Disable the entire color picker
error String nil Error message displayed below the picker
name String nil Name attribute for the hidden form input
compact Boolean false Compact mode — renders a small swatch trigger that opens the picker as a popover

変更履歴 v1.0.0

- Initial release with saturation/lightness pad and hue slider
- Optional alpha channel slider
- Preset color swatches with active state ring
- Manual hex input with validation
- Compact popover mode
- Dark mode support throughout
- Hidden form input for Rails form integration

フルアクセスを取得

このコンポーネントと他のすべてのソースコードをアンロックしましょう。一回のお支払いで永久アクセス。

今すぐアクセスを取得