Componente ColorPicker — sgcHTML | eSeGeCe

ColorPicker

TsgcHTMLComponent_ColorPicker — renderize um input de cor HTML5 nativo com campo de texto hexadecimal opcional e amostras predefinidas de um clique, em Delphi, C++ Builder e .NET.

Visão geral

TsgcHTMLComponent_ColorPicker

Um <input> de cor nativo com rótulo. Defina um Value inicial, adicione amostras predefinidas em Swatches, então leia a propriedade HTML (ou chame o helper estático Build para uma linha única).

Classe do componente

TsgcHTMLComponent_ColorPicker

Renderiza

<input type="color"> HTML5 nativo + amostras

Família

Formulários & Entradas

Linguagens

Delphi, C++ Builder, .NET

QuickStart

Crie, adicione amostras, renderize

Defina FieldName, LabelText e um Value inicial, adicione predefinições de um clique em Swatches, então leia HTML — ou chame o helper 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");

Referência

Principais propriedades & métodos

Os membros que você usa com mais frequência.

Valor

Value pré-preenche o seletor (padrão #0d6efd); FieldName define o name do input para que ele seja enviado com o formulário.

Rótulo

LabelText renderiza um form-label opcional acima do seletor, vinculado via for.

Campo de texto hexadecimal

ShowValueInput adiciona um campo de texto sincronizado ao lado do seletor, para que o usuário possa digitar ou colar um valor #rrggbb diretamente.

Amostras

Swatches (um TStrings de códigos hexadecimais) renderiza uma linha de botões predefinidos; clicar em um deles atualiza o seletor (e o campo hexadecimal) no lado do cliente.

Estado & identidade

Disabled desativa ambos os inputs; ColorPickerID define o id do elemento (usa cp_<FieldName> ou um id gerado automaticamente como padrão).

Helper estático

Build(fieldName, value, labelText) retorna o markup em uma única linha, sem precisar gerenciar uma instância.

Recursos

Continue explorando

	Ajuda onlineReferência completa da API e guia de uso para este componente.	Abrir
	Todos os Componentes sgcHTMLExplore a matriz completa de recursos com mais de 80 componentes.	Abrir
	Baixar Versão de Avaliação GratuitaA avaliação de 30 dias inclui os projetos de demonstração 60.HTML.	Abrir
	PreçosLicenças Single, Team e Site com código-fonte completo.	Abrir