ColorPicker-component — sgcHTML | eSeGeCe

ColorPicker

TsgcHTMLComponent_ColorPicker — render een native HTML5-kleurinvoer met een optioneel hex-tekstveld en kleurstalen met één klik, in Delphi, C++ Builder en .NET.

In één oogopslag

TsgcHTMLComponent_ColorPicker

Een gelabelde native kleur-<input>. Stel een startwaarde Value in, voeg voorinstellingen toe aan Swatches, en lees dan de HTML-eigenschap (of roep de statische helper Build aan voor een one-liner).

Componentklasse

TsgcHTMLComponent_ColorPicker

Rendert

Native HTML5 <input type="color"> + kleurstalen

Familie

Formulieren en invoer

Talen

Delphi, C++ Builder, .NET

QuickStart

Maak het aan, voeg kleurstalen toe, render het

Stel FieldName, LabelText en een startwaarde Value in, voeg voorinstellingen met één klik toe aan Swatches, en lees dan HTML — of roep de statische helper Build aan.

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

Referentie

Belangrijkste eigenschappen en methoden

De members die je het vaakst gebruikt.

Waarde

Value vult de kiezer vooraf in (standaard #0d6efd); FieldName stelt de name van de invoer in zodat deze met het formulier wordt gepost.

Label

LabelText rendert een optioneel form-label boven de kiezer, gekoppeld via for.

Hex-tekstveld

ShowValueInput voegt een gesynchroniseerd tekstveld toe naast de kiezer, zodat gebruikers rechtstreeks een #rrggbb-waarde kunnen typen of plakken.

Kleurstalen

Swatches (een TStrings met hexcodes) rendert een rij voorinstellingsknoppen; op één klikken werkt de kiezer (en het hexveld) client-side bij.

Status en identiteit

Disabled schakelt beide invoervelden uit; ColorPickerID stelt het element-id in (valt terug op cp_<FieldName> of een automatisch gegenereerd id).

Statische helper

Build(fieldName, value, labelText) retourneert de markup in één regel, zonder dat je een instantie hoeft te beheren.

Bronnen

Blijf ontdekken

	Online helpVolledige API-referentie en gebruikshandleiding voor dit onderdeel.	Open
	Alle sgcHTML-componentenBlader door de volledige functiematrix van 80+ componenten.	Openen
	Download gratis proefversieDe proefversie van 30 dagen bevat de 60.HTML-demoprojecten.	Openen
	PrijzenSingle-, Team- en Site-licenties met volledige broncode.	Openen