Composant ColorPicker — sgcHTML | eSeGeCe

ColorPicker

TsgcHTMLComponent_ColorPicker — affichez une saisie de couleur HTML5 native avec un champ de texte hexadécimal optionnel et des nuanciers prédéfinis en un clic, en Delphi, C++ Builder et .NET.

En bref

TsgcHTMLComponent_ColorPicker

Un <input> de couleur natif avec libellé. Définissez une Value de départ, ajoutez des Swatches prédéfinis, puis lisez la propriété HTML (ou appelez l'assistant statique Build pour une seule ligne).

Classe du composant

TsgcHTMLComponent_ColorPicker

Produit

<input type="color"> HTML5 natif + nuanciers

Famille

Formulaires & Saisies

Langages

Delphi, C++ Builder, .NET

QuickStart

Créez-le, ajoutez des nuanciers, affichez-le

Définissez FieldName, LabelText et une Value de départ, ajoutez des préréglages en un clic à Swatches, puis lisez HTML — ou appelez l'assistant statique 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");

Référence

Propriétés & méthodes clés

Les membres que vous utilisez le plus souvent.

Valeur

Value préremplit le sélecteur (par défaut #0d6efd) ; FieldName définit le name de la saisie pour qu'elle soit envoyée avec le formulaire.

Libellé

LabelText affiche un form-label optionnel au-dessus du sélecteur, lié via for.

Champ hexadécimal

ShowValueInput ajoute une saisie de texte synchronisée à côté du sélecteur, pour que l'utilisateur puisse saisir ou coller directement une valeur #rrggbb.

Nuanciers

Swatches (un TStrings de codes hexadécimaux) affiche une rangée de boutons prédéfinis ; en cliquer un met à jour le sélecteur (et le champ hexadécimal) côté client.

État & identité

Disabled désactive les deux saisies ; ColorPickerID définit l'id de l'élément (revient à cp_<FieldName> ou à un id généré automatiquement).

Assistant statique

Build(fieldName, value, labelText) renvoie le balisage en une seule ligne sans gérer d'instance.

Ressources

Continuez l'exploration

	Aide en ligneRéférence API complète et guide d’utilisation pour ce composant.	Ouvrir
	Tous les composants sgcHTMLParcourez la matrice complète des fonctionnalités de plus de 80 composants.	Ouvrir
	Télécharger la version d'essai gratuiteLa version d'essai de 30 jours fournit les projets de démonstration 60.HTML.	Ouvrir
	TarifsLicences Single, Team et Site avec code source complet.	Ouvrir