ColorPicker Component — sgcHTML | eSeGeCe

ColorPicker

TsgcHTMLComponent_ColorPicker — erzeugen Sie eine native HTML5-Farbeingabe mit optionalem Hex-Textfeld und einklickbaren vordefinierten Farbfeldern, in Delphi, C++ Builder und .NET.

Auf einen Blick

TsgcHTMLComponent_ColorPicker

Eine beschriftete native Farb-<input>. Setzen Sie einen Startwert Value, fügen Sie voreingestellte Swatches hinzu und lesen Sie dann die HTML-Eigenschaft (oder rufen Sie den statischen Build-Helfer für eine Einzeiler-Lösung auf).

Komponentenklasse

TsgcHTMLComponent_ColorPicker

Rendert

Natives HTML5 <input type="color"> + Farbfelder

Familie

Formulare & Eingaben

Sprachen

Delphi, C++ Builder, .NET

QuickStart

Erstellen, Farbfelder hinzufügen, rendern

Setzen Sie FieldName, LabelText und einen Startwert Value, fügen Sie einklickbare Voreinstellungen zu Swatches hinzu und lesen Sie dann HTML — oder rufen Sie den statischen Build-Helfer auf.

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");

Referenz

Wichtige Eigenschaften & Methoden

Die Member, die Sie am häufigsten verwenden.

Wert

Value füllt den Picker vor (Standard #0d6efd); FieldName setzt das name-Attribut der Eingabe, damit sie mit dem Formular gepostet wird.

Label

LabelText rendert ein optionales form-label über dem Picker, verknüpft über for.

Hex-Textfeld

ShowValueInput fügt neben dem Picker ein synchronisiertes Textfeld hinzu, sodass Benutzer einen #rrggbb-Wert direkt eingeben oder einfügen können.

Farbfelder

Swatches (eine TStrings mit Hex-Codes) rendert eine Reihe voreingestellter Schaltflächen; ein Klick aktualisiert clientseitig den Picker (und das Hex-Feld).

Status & Identität

Disabled deaktiviert beide Eingaben; ColorPickerID setzt die Element-ID (fällt zurück auf cp_<FieldName> oder eine automatisch erzeugte ID).

Statischer Helfer

Build(fieldName, value, labelText) gibt das Markup in einer Zeile zurück, ohne eine Instanz zu verwalten.

Ressourcen

Weiter entdecken

	Online-HilfeVollständige API-Referenz und Verwendungshandbuch für diese Komponente.	Öffnen
	Alle sgcHTML-KomponentenDurchsuchen Sie die vollständige Funktionsmatrix von über 80 Komponenten.	Öffnen
	Kostenlose Testversion herunterladenDie 30-Tage-Testversion enthält die 60.HTML-Demoprojekte.	Öffnen
	PreiseSingle-, Team- und Site-Lizenzen mit vollständigem Quellcode.	Öffnen