Componente ColorPicker — sgcHTML

De un vistazo

TsgcHTMLComponent_ColorPicker

Un <input> de color nativo con etiqueta. Define un Value inicial, añade muestras predefinidas a Swatches, y luego lee la propiedad HTML (o llama al método estático Build para una sola línea).

Clase del componente

TsgcHTMLComponent_ColorPicker

Genera

Input de color HTML5 nativo <input type="color"> + muestras

Familia

Formularios y Entradas

Lenguajes

Delphi, C++ Builder, .NET

Inicio rápido

Créalo, añade muestras, renderízalo

Define FieldName, LabelText y un Value inicial, añade muestras predefinidas de un clic a Swatches, y luego lee HTML — o llama al método estático 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");

Referencia

Propiedades y métodos clave

Los miembros que usarás con más frecuencia.

Valor

Value precarga el selector (por defecto #0d6efd); FieldName define el name del input para que se envíe con el formulario.

Etiqueta

LabelText renderiza una form-label opcional encima del selector, vinculada mediante for.

Campo de texto hexadecimal

ShowValueInput añade un input de texto sincronizado junto al selector, para que el usuario pueda escribir o pegar un valor #rrggbb directamente.

Muestras

Swatches (un TStrings de códigos hexadecimales) renderiza una fila de botones predefinidos; al hacer clic en uno se actualiza el selector (y el campo hexadecimal) del lado del cliente.

Estado e identidad

Disabled desactiva ambos inputs; ColorPickerID define el id del elemento (recurre a cp_<FieldName> o a un id generado automáticamente).

Método estático

Build(fieldName, value, labelText) devuelve el marcado en una sola línea sin gestionar una instancia.

Recursos

Sigue explorando

	Ayuda en líneaReferencia completa de la API y guía de uso para este componente.	Abrir
	Todos los componentes de sgcHTMLExplora la matriz completa de más de 80 componentes.	Abrir
	Descargar prueba gratuitaLa prueba de 30 días incluye los proyectos de demostración 60.HTML.	Abrir
	PreciosLicencias Single, Team y Site con código fuente completo.	Abrir

ColorPicker