ColorPicker Component — sgcHTML | eSeGeCe

ColorPicker

TsgcHTMLComponent_ColorPicker — renderizza un input colore HTML5 nativo con un campo testo esadecimale opzionale e swatch preimpostati a un clic, in Delphi, C++ Builder e .NET.

In sintesi

TsgcHTMLComponent_ColorPicker

Un <input> colore nativo con etichetta. Imposta un Value iniziale, aggiungi degli Swatches preimpostati, quindi leggi la proprietà HTML (oppure chiama l’helper statico Build per una riga sola).

Classe del componente

TsgcHTMLComponent_ColorPicker

Renderizza

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

Famiglia

Moduli e Campi

Linguaggi

Delphi, C++ Builder, .NET

QuickStart

Crealo, aggiungi gli swatch, renderizzalo

Imposta FieldName, LabelText e un Value iniziale, aggiungi preimpostazioni a un clic a Swatches, quindi leggi HTML — oppure chiama l’helper statico 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");

Riferimento

Proprietà e metodi principali

I membri che utilizzerai più spesso.

Valore

Value precompila il selettore (predefinito #0d6efd); FieldName imposta il name dell’input in modo che venga inviato con il modulo.

Etichetta

LabelText renderizza un form-label opzionale sopra il selettore, collegato tramite for.

Campo testo esadecimale

ShowValueInput aggiunge un campo di testo sincronizzato accanto al selettore, così gli utenti possono digitare o incollare direttamente un valore #rrggbb.

Swatch

Swatches (una TStrings di codici esadecimali) renderizza una riga di pulsanti preimpostati; cliccandone uno si aggiorna il selettore (e il campo esadecimale) lato client.

Stato e identità

Disabled disabilita entrambi gli input; ColorPickerID imposta l’id dell’elemento (ricade su cp_<FieldName> oppure su un id generato automaticamente).

Helper statico

Build(fieldName, value, labelText) restituisce il markup in una sola riga senza dover gestire un’istanza.

Risorse

Continua a esplorare

	Guida in lineaRiferimento API completo e guida all’uso per questo componente.	Apri
	Tutti i componenti sgcHTMLEsplora la matrice completa delle funzionalità di oltre 80 componenti.	Apri
	Scarica la Prova GratuitaLa prova di 30 giorni include i progetti demo 60.HTML.	Apri
	PrezziLicenze Single, Team e Site con codice sorgente completo.	Apri