Komponent ColorPicker — sgcHTML | eSeGeCe

ColorPicker

TsgcHTMLComponent_ColorPicker — renderuje natywne pole wyboru koloru HTML5 z opcjonalnym polem tekstowym hex i gotowymi próbkami kolorów wybieranymi jednym kliknięciem, w Delphi, C++ Builder i .NET.

W skrócie

TsgcHTMLComponent_ColorPicker

Opisane etykietą natywne pole <input> koloru. Ustaw początkową wartość Value, dodaj gotowe próbki Swatches, a następnie odczytaj właściwość HTML (lub wywołaj statyczną metodę pomocniczą Build dla jednej linii kodu).

Klasa komponentu

TsgcHTMLComponent_ColorPicker

Renderuje

Natywne pole HTML5 <input type="color"> + próbki kolorów

Rodzina

Formularze i pola

Języki

Delphi, C++ Builder, .NET

Szybki start

Utwórz, dodaj próbki, wyrenderuj

Ustaw FieldName, LabelText i początkową wartość Value, dodaj gotowe próbki do Swatches, a następnie odczytaj HTML — lub wywołaj statyczną metodę pomocniczą 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");

Dokumentacja

Kluczowe właściwości i metody

Składniki, po które sięgasz najczęściej.

Wartość

Value wstępnie wypełnia pole wyboru (domyślnie #0d6efd); FieldName ustawia atrybut name pola, dzięki czemu jest ono wysyłane wraz z formularzem.

Etykieta

LabelText renderuje opcjonalną etykietę form-label nad polem wyboru, powiązaną za pomocą atrybutu for.

Pole tekstowe hex

ShowValueInput dodaje zsynchronizowane pole tekstowe obok pola wyboru, dzięki czemu użytkownicy mogą wpisać lub wkleić wartość #rrggbb bezpośrednio.

Próbki kolorów

Swatches (lista TStrings kodów hex) renderuje rząd gotowych przycisków; kliknięcie jednego z nich aktualizuje pole wyboru (i pole hex) po stronie klienta.

Stan i identyfikator

Disabled wyłącza oba pola; ColorPickerID ustawia identyfikator elementu (domyślnie cp_<FieldName> lub identyfikator generowany automatycznie).

Metoda pomocnicza

Build(fieldName, value, labelText) zwraca znaczniki w jednej linii, bez konieczności zarządzania instancją.

Zasoby

Poznawaj dalej

	Pomoc onlinePełna dokumentacja API i przewodnik użytkowania tego komponentu.	Otwórz
	Wszystkie komponenty sgcHTMLPrzejrzyj pełną matrycę funkcji 80+ komponentów.	Otwórz
	Pobierz bezpłatną wersję próbną30-dniowa wersja próbna zawiera projekty demonstracyjne 60.HTML.	Otwórz
	CennikLicencje Single, Team i Site z pełnym kodem źródłowym.	Otwórz