ColorPicker
TsgcHTMLComponent_ColorPicker — Delphi、C++ Builder、.NET で、任意の16進数テキストフィールドとワンクリックのスウォッチプリセットを備えたネイティブ HTML5 カラー入力をレンダリングします。
TsgcHTMLComponent_ColorPicker — Delphi、C++ Builder、.NET で、任意の16進数テキストフィールドとワンクリックのスウォッチプリセットを備えたネイティブ HTML5 カラー入力をレンダリングします。
ラベル付きのネイティブカラー <input> です。開始値として Value を設定し、プリセットの Swatches を追加してから、HTML プロパティを読み取ります(または、静的な Build ヘルパーを呼び出して 1 行で済ませます)。
TsgcHTMLComponent_ColorPicker
ネイティブ HTML5 <input type="color"> + スウォッチ
Delphi, C++ Builder, .NET
FieldName、LabelText、開始値の 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 はピッカーの初期値を設定します(デフォルトは #0d6efd)。FieldName は入力の name を設定し、フォームと一緒に送信されるようにします。
LabelText は、for でリンクされた任意の form-label をピッカーの上にレンダリングします。
ShowValueInput は、ピッカーの隣に同期したテキスト入力を追加し、ユーザーが #rrggbb の値を直接入力または貼り付けできるようにします。
Swatches(16進コードの TStrings)は、プリセットボタンの行をレンダリングします。クリックすると、クライアント側でピッカー(および16進フィールド)が更新されます。
Disabled は両方の入力を無効にします。ColorPickerID は要素の id を設定します(cp_<FieldName> または自動生成された id にフォールバックします)。
Build(fieldName, value, labelText) は、インスタンスを管理せずに 1 行でマークアップを返します。