ColorPicker コンポーネント — sgcHTML | eSeGeCe

ColorPicker

TsgcHTMLComponent_ColorPicker — Delphi、C++ Builder、.NET で、任意の16進数テキストフィールドとワンクリックのスウォッチプリセットを備えたネイティブ HTML5 カラー入力をレンダリングします。

TsgcHTMLComponent_ColorPicker

ラベル付きのネイティブカラー <input> です。開始値として Value を設定し、プリセットの Swatches を追加してから、HTML プロパティを読み取ります(または、静的な Build ヘルパーを呼び出して 1 行で済ませます)。

コンポーネントクラス

TsgcHTMLComponent_ColorPicker

レンダリング内容

ネイティブ HTML5 <input type="color"> + スウォッチ

ファミリー

フォーム & 入力

言語

Delphi, C++ Builder, .NET

作成し、スウォッチを追加し、レンダリングする

FieldNameLabelText、開始値の Value を設定し、Swatches にワンクリックのプリセットを追加してから、HTML を読み取ります — または静的な Build ヘルパーを呼び出します。

uses
  sgcHTML_Component_ColorPicker;

var
  oColor: TsgcHTMLComponent_ColorPicker;
begin
  oColor := TsgcHTMLComponent_ColorPicker.Create(nil);
  try
    oColor.FieldName := 'brand_color';
    oColor.LabelText := 'Brand color';
    oColor.Value := '#0d6efd';
    oColor.ShowValueInput := True;

    oColor.Swatches.Add('#0d6efd');
    oColor.Swatches.Add('#198754');
    oColor.Swatches.Add('#dc3545');

    WebModule.Response := oColor.HTML;   // color input + hex field + swatches
  finally
    oColor.Free;
  end;
end;

// Or the static one-liner (field name, value, label):
Result := TsgcHTMLComponent_ColorPicker.Build('brand_color', '#0d6efd', 'Brand color');
// includes: sgcHTML_Component_ColorPicker.hpp

TsgcHTMLComponent_ColorPicker *oColor = new TsgcHTMLComponent_ColorPicker(NULL);
try
{
  oColor->FieldName = "brand_color";
  oColor->LabelText = "Brand color";
  oColor->Value = "#0d6efd";
  oColor->ShowValueInput = true;

  oColor->Swatches->Add("#0d6efd");
  oColor->Swatches->Add("#198754");
  oColor->Swatches->Add("#dc3545");

  String html = oColor->HTML;   // color input + hex field + swatches
}
__finally
{
  delete oColor;
}

// Or the static one-liner:
String html = TsgcHTMLComponent_ColorPicker::Build("brand_color", "#0d6efd", "Brand color");
using esegece.sgcWebSockets;

var color = new TsgcHTMLComponent_ColorPicker();
color.FieldName = "brand_color";
color.LabelText = "Brand color";
color.Value = "#0d6efd";
color.ShowValueInput = true;

color.Swatches.Add("#0d6efd");
color.Swatches.Add("#198754");
color.Swatches.Add("#dc3545");

string html = color.HTML;   // color input + hex field + swatches

// Or the static one-liner:
string html2 = TsgcHTMLComponent_ColorPicker.Build("brand_color", "#0d6efd", "Brand color");

主なプロパティとメソッド

最もよく使うメンバーです。

Value

Value はピッカーの初期値を設定します(デフォルトは #0d6efd)。FieldName は入力の name を設定し、フォームと一緒に送信されるようにします。

Label

LabelText は、for でリンクされた任意の form-label をピッカーの上にレンダリングします。

Hex text field

ShowValueInput は、ピッカーの隣に同期したテキスト入力を追加し、ユーザーが #rrggbb の値を直接入力または貼り付けできるようにします。

Swatches

Swatches(16進コードの TStrings)は、プリセットボタンの行をレンダリングします。クリックすると、クライアント側でピッカー(および16進フィールド)が更新されます。

State & identity

Disabled は両方の入力を無効にします。ColorPickerID は要素の id を設定します(cp_<FieldName> または自動生成された id にフォールバックします)。

Static helper

Build(fieldName, value, labelText) は、インスタンスを管理せずに 1 行でマークアップを返します。

さらに詳しく

オンラインヘルプこのコンポーネントの完全な API リファレンスと使用ガイドです。
すべての sgcHTML コンポーネント80 以上のコンポーネントの全機能マトリックスを閲覧できます。
無料体験版のダウンロード30 日間の体験版には 60.HTML デモプロジェクトが付属します。
価格完全なソースコード付きの Single、Team、Site ライセンス。

始める準備はできましたか?

無料体験版をダウンロードして、Delphi、C++ Builder、.NET で Web UI の構築を始めましょう。